如何使用 jQuery slim 和新的 @popperjs 使用 Laravel-mix 构建 Bootstrap 4?
How to build Bootstrap 4 with jQuery slim and new @popperjs with Laravel-mix?
webpack.mix.js
的内容:
const mix = require('laravel-mix');
mix.js('resources/assets/js/vendor.js', 'public/js');
vendor.js
的内容:
window.Popper = require('@popperjs/core').default;
try {
window.$ = window.jQuery = require('jquery/dist/jquery.slim.js');
require('bootstrap');
} catch (e) {}
构建后,在 public/js/vendor.js
文件中我可以清楚地看到 @popperjs
和 jquery.slim.js
被包含在 jquery
和旧的 popperjs
之上(它们被复制了)。
我知道这是因为 node_modules\bootstrap\dist\js\bootstrap.js
有 require('jquery'), require('popper.js')
作为依赖项。
如何在没有旧 popperjs
和完整 jquery
版本的情况下使用新 @popperjs
和 jquery.slim.js
构建资产?
它可以帮助你:https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript
因此您可以单独导入插件并使用较新的 popperjs 版本。但是请放心,bootstrap 4 使用较新的 popperjs 版本可能会不稳定。
顺便说一句:https://github.com/twbs/bootstrap/issues/29842 机会 bootstrap 5.
Bootstrap4不兼容Popper 2(npm@popperjs/core
),需要使用Popper 1(npm@popper.js
)
参考:
I know that this happens because
node_modules\bootstrap\dist\js\bootstrap.js
hasrequire('jquery')
,require('popper.js')
as dependencies.
不正确。
Bootstrap 不会为您加载 jQuery 或 popper。无论您使用什么包管理器,您都必须自己加载它们。
来源:https://getbootstrap.com/docs/4.0/getting-started/download/#package-managers
require('bootstrap')
will load all of Bootstrap’s jQuery plugins onto the jQuery object.
安装 npm
Bootstrap 软件包时,如果在您的依赖项中找不到合适的 jquery
软件包版本,您得到的只是控制台警告。
这也很容易测试:只需在要求 Bootstrap 之前不包括 jQuery,打开控制台,拿一袋爆米花,点击刷新按钮并欣赏节目。
要告诉 webpack jquery
可以在 window.jQuery
找到(无论何时在您的应用程序中可能需要或导入),您应该在 webpack 配置的 externals
中指定它:
externals: {
jquery: 'window.jQuery'
}
有了这个,在你的应用程序中任何你使用 import * as $ from 'jquery'
的地方,它实际上会使用 window.jQuery
在 require/import 完成时的任何内容。
就回答 "Which are Bootstrap's dependencies?" 问题的可靠来源而言,唯一的来源是 Getting Started.
这里是他们明确指出 jQuery 不包括在内的地方:#js-files