如何将 popper.js 添加到 Laravel 8 with Bootstrap 5 项目？

Question

我正在使用 Laravel 8 和 Bootstrap 5 制作博客应用程序。我使用放置在 Bootstrap 模态中的表单来添加帖子。 此外，我在项目中包含一个 JavaScript 文件。

<script src="{{ asset('js/app.js') }}"></script>

在resources/js中，我有一个 app.js 和一个 bootstrap.js 文件。 在 app.js 中，我需要 bootstrap.js

require('./bootstrap')

从webpack.mix.js我将所有这些编译成单个 JavaScript 文件public\js\app.js ：

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

我想将 popper.js 添加到项目中，如下所示：

require('./popper');
require('./bootstrap');

但是，为此目的，我需要resources/js中的 popper.js 以及其他两个文件。 所以，我做了npm i @popperjs/core和npm run dev 。 但它不编译，我没有在上面提到的 js 目录中得到 popper.js。 那么，我该如何解决这个问题呢？

Answer 1

1 - 使用此命令安装@popperjs/core ： npm i @popperjs/core

2 - 将此行添加到您的bootstrap.js文件中：

window.Popper = require('@popperjs/core');

3 - 运行此命令： npm run dev

4 - 现在您可以访问刀片文件中的window.Popper 。

Answer 2

在您的 resources/js/bootstrap.js 文件中，您可以像下面这样将 Popper.js 和 Bootstrap 与 jQuery 一起使用。

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('@popperjs/core');
    window.bootstrap = require('bootstrap');
} catch (exception) {
    console.error(exception);
}