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

Question

我正在使用 Laravel 8 和 Bootstrap 制作博客应用程序 5. 我使用放置在 Bootstrap 模态中的表单来添加 post。此外，我在项目中包含一个 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

在您的 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);
}

Answer 2

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

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

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

3 - 运行这个命令：npm run dev

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

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

How do I add popper.js to a Laravel 8 with Bootstrap 5 project?

javascript

twitter-bootstrap

laravel

laravel-mix

popper.js