如何为 Bootstrap4 弹出窗口和工具提示配置 webpack (Popper.js)

Question

我正在尝试从 bootstrap 4 alpha 更新到 beta，我正在使用 webpack！
到目前为止，我已经成功地将我的代码迁移到兼容，唯一的问题是我无法让工具提示和下拉菜单工作！根据文档，他们说这些功能取决于 popper.js，并给出了一个关于如何配置 i 工作的示例！
我已经按照这些说明进行操作，但现在当我想使用下拉菜单和工具提示时，我会收到 TypeError: popper is undefined

webpack.mix.js

const path = require('path');
const webpack = require('webpack');
const { mix } = require('laravel-mix');

mix.webpackConfig({
    output: {
        path: path.join(__dirname, "/public"),
        publicPath: '/',
        chunkFilename: 'js/modules/[name].js'
    },
    plugins:[
        new webpack.ProvidePlugin({
            Moment: 'moment',
            'window.Moment': 'moment',
            Popper: ['popper.js', 'default'],
            popper: ['popper.js', 'default'],
            // 'window.Po': ['popper.js', 'default']
        }),
        new webpack.optimize.MinChunkSizePlugin({minChunkSize: 100000})
    ]
});

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.autoload({
    vue: [ 'Vue', 'window.Vue' ],
    // moment: ['window.moment', 'Moment'],
    jquery: ['$','jQuery','window.jQuery'],
    tether: ['window.Tether', 'Tether'],
    axios: ['axios','window.axios'],
    'cookies-js': ['Cookies']
});

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['vue','lodash','cookies-js','jquery','moment','tether','bootstrap','axios'])
    .sass('resources/assets/sass/app.scss', 'public/css')
    .js('resources/assets/js/admin.js', 'public/js')
    .sass('resources/assets/sass/admin.scss', 'public/css')
    .version()
    .browserSync({
        proxy: 'localhost:8000'
    });

我无法弄清楚我在这里缺少什么

更新
HTML 代码

<li class="nav-drop dropdown">
  <a href="#currency-menu" data-toggle="dropdown">{{ moneyCurrencyCode() }}</a>
  <ul id="currency-menu" class="list nav-drop-menu dropdown-menu">
      <li><a data-toggle="currency" data-currency="MZN" href="#">MZN</a></li>
      <li><a data-toggle="currency" data-currency="ZAR" href="#">ZAR</a></li>
      <li><a data-toggle="currency" data-currency="USD" href="#">USD</a></li>
      <li><a data-toggle="currency" data-currency="EUR" href="#">EUR</a></li>
  </ul>
</li>

Answer 1

为了使用 bootsrap4（测试版）弹出窗口、工具提示、使用 laravel webpack mix 的下拉菜单，您必须下载 popper.js 和 bootstrap 4。

npm install bootstrap:4.0.0-beta popper.js --save

之后，您必须编辑 resources/assets/js/bootstrap.js 文件以包含 popper.js：

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js/dist/umd/popper.js').default;

    require('bootstrap/js/src/dropdown');
    require('bootstrap/js/src/popover');
    require('bootstrap/js/src/tooltip');

} catch (e) {
}

最后你还需要编辑 webpack.mix.js 文件：

mix.autoload({
    'jquery': ['$', 'window.jQuery', "jQuery", "window.$", "jquery", "window.jquery"],
    'popper.js/dist/umd/popper.js': ['Popper', 'window.Popper']
});

Answer 2

这实际上对我有用：

let mix = require('laravel-mix');
let webpack = require('webpack');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .webpackConfig({
     plugins: [
       new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery',
         'window.jQuery': 'jquery',
         Popper: ['popper.js', 'default'],
       })
     ]
   })
   .version();

Answer 3

经过一番调查，我发现问题不在于配置，而在于 HTML 代码！由于我从 bootstrap 4 alpha 迁移到 beta，我不得不将下拉工具上的 href="#currency-menu" 更改为 href="#"，所以它看起来有以下内容

HTML 代码

<li class="nav-drop dropdown">
  <a href="#" data-toggle="dropdown">{{ moneyCurrencyCode() }}</a>
  <ul id="currency-menu" class="list nav-drop-menu dropdown-menu">
      <li><a data-toggle="currency" data-currency="MZN" href="#">MZN</a></li>
      <li><a data-toggle="currency" data-currency="ZAR" href="#">ZAR</a></li>
      <li><a data-toggle="currency" data-currency="USD" href="#">USD</a></li>
      <li><a data-toggle="currency" data-currency="EUR" href="#">EUR</a></li>
  </ul>
</li>