时间戳

首页 > 解决方案 > 如何使用 jQuery slim 和新的 @popperjs 使用 Laravel-mix 构建 Bootstrap 4？

javascript - 如何使用 jQuery slim 和新的 @popperjs 使用 Laravel-mix 构建 Bootstrap 4？

问题描述

的内容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之上（它们被重复）。jquerypopperjs

我知道发生这种情况是因为node_modules\bootstrap\dist\js\bootstrap.js有require('jquery'), require('popper.js')作为依赖项。

如何使用新版本@popperjs和jquery.slim.js不使用旧版本popperjs和完整jquery版本构建资产？

标签： javascriptlaravelwebpacklaravel-6laravel-mix

解决方案

它可以帮助你：https ://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript

因此，您可以单独导入插件并使用更新的 popperjs 版本。但是请放心，bootstrap 4 使用更新的 popperjs 版本可能会不稳定。

顺便说一句：https ://github.com/twbs/bootstrap/issues/29842在引导程序 5 中的机会。

推荐阅读