Webpack 4 摇树 bootstrap，我该如何预防？

Question

我正在尝试获取使用 Jquery 模态插件的遗留应用程序，该插件需要 bootstrap 的 javascript 在 Angular 6 和 Webpack 4 中工作使用自定义 Webpack 配置的项目。一切正常，除了捆绑过程中发生的 tree shaking 正在删除我的 vendor.ts 文件中的 bootstrap 导入，因为我在我的应用程序中没有明确使用 bootstrap 导入。

这会导致我的 bootstrap 模态框和 bootstrap 下拉菜单中断。

注意： 如果我添加如下内容：

import * as bootstrap from "bootstrap";
console.log(bootstrap);

到我的 main.ts 文件，webpack 不会删除 bootstrap 并且一切正常。

我已经尝试在 the documentation 中建议的 package.json 副作用属性中添加多个条目，但我认为此属性用于标记应该删除的代码。有没有办法将导入的模块标记为 not 以从 tree shaking 过程中删除？

我也试过这样的 ProvidePlugin:

new ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    _: "underscore",
    bootstrap: "bootstrap",
    moment: "moment",
    momenttimezone: "moment-timezone",
    // Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
    // Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
})

感谢您的宝贵时间。

Answer 1

在您的 webpack 配置中尝试 webpack.ProvidePlugin：

Automatically load modules instead of having to import or require them everywhere.

示例：

// In webpack config
...
plugins: [
  new webpack.ProvidePlugin({
    bootstrap: 'bootstrap'
  })
]
...

More info about "shimming" in the documentation.

Answer 2

我遇到了同样的问题，解决方案如下：

而不是使用 "import"，使用 "require"。

改变这个

import * as bootstrap from "bootstrap";

至此

require("bootstrap");

不幸的是，我还没有弄清楚如何让它与 "import" 一起工作。

Answer 3

在深入研究这个问题之后，我在其他导入中遇到了类似的问题，根本问题是我在不止一个地方引用了第三方库。

换句话说，我在 main.ts、vendor.ts 和 中导入了 JQuery、bootstrap 和其他库提供插件。捆绑应用程序后，不同的引用相互冲突，这导致我的应用程序出现问题。

我首先清理了所有引用并将它们全部放在一个地方，即 ProvidePlugin。然后我还将 runtimeChunk 添加到我的 webpack 配置中。

optimization: {
    runtimeChunk: "single"
}

这确保所有代码都引用相同的库。查看文档 here。我将保留@hostar 接受的答案，因为他确实解决了我最初的问题。

Answer 4

从 Bootstrap 的 4.5 版开始，我认为更好的解决方案是明确说明您正在使用的插件 in the documentation:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/modal';

通过这种方式，您不会加载完整的 bootstrap js，而只会加载您需要的内容。 Afaik，如果您正在使用它，则不需要使用 ProvidePlugin 将 bootstrap 设置为全局，也不需要特殊的摇树配置。

此外，如果您仅使用 jQuery 作为 Bootstrap，则无需为 jQuery 进行特殊配置。 bootstrap/js/dist/util.js 已经 import $ "from jquery"，因此 webpack 将处理导入。

如果您更喜欢使用而不是 "jquery"，请创建一个别名，这样 import "jquery" 将被解析为 slim 模块。事实上，我总是配置指向完整版或瘦版的别名。我发现这样可以避免不小心两次import jQuery..

这样的问题

resolve: {
    alias: {
        // or "jquery/dist/jquery.js" for the full version
        jquery: 'jquery/dist/jquery.slim.js',
    }
},

Webpack 4 摇树 bootstrap，我该如何预防？

Webpack 4 is tree shaking away bootstrap, how can I prevent that?

javascript

angular

webpack

tree-shaking