[英]How do I add popper.js to a Laravel 8 with Bootstrap 5 project?
I am making a blogging application with Laravel 8 and Bootstrap 5. I use a form placed within a Bootstrap modal to add a post.我正在使用 Laravel 8 和 Bootstrap 5 制作博客应用程序。我使用放置在 Bootstrap 模态中的表单来添加帖子。 In addition, I include a single JavaScript file in the project.此外,我在项目中包含一个 JavaScript 文件。
<script src="{{ asset('js/app.js') }}"></script>
In resources/js
, I have an app.js and a bootstrap.js file.在resources/js
中,我有一个 app.js 和一个 bootstrap.js 文件。 In app.js, I require bootstrap.js with在 app.js 中,我需要 bootstrap.js
require('./bootstrap')
From webpack.mix.js
I compile all that into the single JavaScript file public\js\app.js
:从webpack.mix.js
我将所有这些编译成单个 JavaScript 文件public\js\app.js
:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
I want to add popper.js to the project, like this:我想将 popper.js 添加到项目中,如下所示:
require('./popper');
require('./bootstrap');
But, for this purpose, I need the popper.js in resources/js
along with the other two files.但是,为此目的,我需要resources/js
中的 popper.js 以及其他两个文件。 So, I did npm i @popperjs/core
and npm run dev
.所以,我做了npm i @popperjs/core
和npm run dev
。 But it does not compile, and I don't get popper.js in the above-metioned js directory.但它不编译,我没有在上面提到的 js 目录中得到 popper.js。 So, how can I fix this issue?那么,我该如何解决这个问题呢?
1 - Install @popperjs/core
using this command: npm i @popperjs/core
1 - 使用此命令安装@popperjs/core
: npm i @popperjs/core
2 - Add this line to your bootstrap.js
file: 2 - 将此行添加到您的bootstrap.js
文件中:
window.Popper = require('@popperjs/core');
3 - Run this command: npm run dev
3 - 运行此命令: npm run dev
4 - Now you have access to window.Popper
in your blade files. 4 - 现在您可以访问刀片文件中的window.Popper
。
In your resources/js/bootstrap.js file, you can use Popper.js and Bootstrap with jQuery like the following.在您的 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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.