javascript - 无法使用 webpack 和 Laravel 混合加载 popper.js

Question

我在我的项目中使用 bootstrap 4 beta 和 Laravel 5.4，并使用 npm 和 laravel mix 加载我的 js 依赖项。到目前为止，一切都运行良好，除非我尝试使用 booostrap js 方法。它抛出错误“Bootstrap dropdown require Popper.js”，所以我下载并加载了它到 bootstrap.js 和 webpack.mix.js 文件中，但它仍然要求这种依赖，你能告诉我我做错了什么吗？

boostrap.js

try {
  window.$ = window.jQuery = require('jquery');

  require('popper.js');
  require('datatables.net');
  require('datatables.net-autofill');
  require('datatables.net-buttons');
  require('bootstrap');
} catch (e) {
  console.log(e);
}

webpack.mix.js

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

mix.js([
  'resources/assets/js/app.js',
  'node_modules/jquery/dist/jquery.min.js',
  'node_modules/popper.js/dist/umd/popper.js',
  'node_modules/bootstrap/dist/js/bootstrap.js',
  'node_modules/datatables.net/js/jquery.dataTables.js',
  'node_modules/datatables.net-buttons/js/dataTables.buttons.js',
  'node_modules/datatables.net-autofill/js/dataTables.autoFill.js',
], 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

Answer 1

我也遇到了这个问题，我通过以下方式解决了这个问题:

你必须安装 popper.js :

npm install popper.js --save

并且在resources/asset/js/bootstrap.js中的bootstrap文件之前加载它

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

和在 webpack.mix.js 中:

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

有几种解决方法。你可以去这里了解更多详情:

https://github.com/FezVrasta/popper.js/issues/287