如何使用 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 文件中我可以清楚地看到 @popperjsjquery.slim.js 被包含在 jquery 和旧的 popperjs 之上(它们被复制了)。

我知道这是因为 node_modules\bootstrap\dist\js\bootstrap.jsrequire('jquery'), require('popper.js') 作为依赖项。

如何在没有旧 popperjs 和完整 jquery 版本的情况下使用新 @popperjsjquery.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 has require('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