Question

我正在尝试获取一个使用Jquery模态插件的旧版应用程序，该插件要求引导程序的javascript在使用自定义Webpack配置的Angular 6和Webpack 4项目中工作。一切正常，除了在捆绑过程中发生的树状摇晃删除了vendor.ts文件中的引导导入之外，因为我在应用程序中没有明确使用引导导入的位置。

这会导致我的引导程序模式和引导程序下拉列表中断。

注意：如果我添加类似内容：

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

对于我的main.ts文件，webpack不会删除引导程序，并且一切正常。

我已经尝试在the documentation中建议的package.json sideEffects属性中添加多个条目，但是我认为该属性用于标记应为已删除。有没有办法将导入的模块标记为不要从摇树过程中删除？

我也尝试过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

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

换句话说，我正在main.ts，vendor.ts和 ProvidePlugin 中导入JQuery，引导程序和其他库。捆绑该应用程序后，不同的引用会相互冲突，这在我的应用程序中引起了问题。

我首先清理了所有引用，并将它们 all 全部保存在ProvidePlugin中。然后，我还将runtimeChunk添加到了我的webpack配置中。

optimization: {
    runtimeChunk: "single"
}

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

Answer 2

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

使用“ require”代替“ import”。

更改此

import * as bootstrap from "bootstrap";

对此

require("bootstrap");

不幸的是，我还没有弄清楚如何使它与“导入”一起使用。

Answer 3

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

自动加载模块，而不必import或require 他们无处不在。

示例：

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

More info about "shimming" in the documentation。

Answer 4

从Bootstrap的4.5版开始，我认为更好的解决方案是明确说明所使用的插件，如in the documentation所述：

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

这样，您将不会加载完整的bootstrap js，而仅加载所需的内容。 Afaik，如果您使用的是引导树，则无需使用ProvidePlugin将引导程序设置为全局，也不需要特殊的摇树配置。

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

如果您更喜欢使用jquery-slim而不是“ jquery”，请创建一个别名，这样import "jquery"将被解析为slim模块。实际上，我总是将别名配置为指向完整版本或精简版本。我发现这可以避免意外导入jQuery之类的问题。

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

Webpack 4正在摇晃引导程序，如何防止这种情况发生？

4 个答案: