如何將 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);
}