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

Question

我在项目上使用bootstrap 4 beta和Laravel 5.4，并使用npm和laravel mix加载我的js依赖项。到目前为止，除我尝试使用booostrap js方法外，其他所有方面都运转良好。它引发了错误“ Bootstrap下拉列表需要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 中的引导文件之前加载它

    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

Answer 2

我有同样的问题，但现在已经完成

我只是在 resources/asset/js/bootstrap.js 中编辑这一行

window._ = require('lodash');

// new line #1
import Popper from 'popper.js/dist/umd/popper.js';

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');
    
    // new line #2 and #3
    window.Popper = Popper;
    require('bootstrap');
} catch (e) {}

您还可以在此处阅读完整指南

希望它也能帮助您解决问题:)