多个 Webpack 捆绑包导致 Bootstrap 脚本无法工作

Question

我得到了这个设置：

core.js

import * as bootstrap from 'bootstrap';
import { Popover } from 'bootstrap';
//...code doing some stuff with Popover

一些FancyPlugin.js

import { Popover } from 'bootstrap';
//...code doing some different stuff with Popover

使用 Webpack，我分别捆绑两个 js 文件并将它们包含在我的 HTML 中：

<script src="/build/core.js" defer></script>
<script src="/build/someFancyPlugin.js" defer></script>
    

奇怪的是，如果两个文件都包含

import { Popover } from 'bootstrap';

，引导 js 代码（例如触发下拉菜单）将不起作用。仅当我注释掉其中一个

import { Popover } from 'bootstrap';

语句时，它才有效。

这太令人困惑了，我该如何解决它？

Answer 1

所以我找到的解决方案是将 bootstrap 定义为 Webpack 外部：https://webpack.js.org/configuration/externals/

这样就不会使用Webpack打包而必须手动添加。

我正在使用 Symfony/Webpack Encore 开发一个项目，所以我遵循了以下说明：

https://symfony.com/doc/current/frontend/encore/advanced-config.html#exclusion-some-dependency-from-output-bundles

本质上这会导致这段代码：

在 webpack.config.js 中

Encore.addExternals({
   bootstrap: 'bootstrap'
})

Encore.addPlugin(new CopyWebpackPlugin({
        patterns: [
            { from: './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js', to: 'bootstrap.bundle.min.js' }
        ]
    }))

在全局模板中

 <script src="{{ asset('build/bootstrap.bundle.min.js') }}"></script>

替代方案是不将 bootstrap.bundle.min.js 复制到构建文件夹，而是从 CDN 包含它。