0

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

这会导致我的引导模式和引导下拉菜单中断。

注意：如果我添加类似：

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

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

我已经尝试向文档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",
})

谢谢你的时间。

4

4 回答 4

2

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

不要使用“import”，而是使用“require”。

改变这个

import * as bootstrap from "bootstrap";

对此

require("bootstrap");

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

于 2018-09-22T12:01:42.717 回答
2

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

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

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

optimization: {
    runtimeChunk: "single"
}

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

于 2018-09-24T22:49:21.287 回答
0

从 Bootstrap 4.5 版开始，我认为更好的解决方案是明确说明您正在使用的插件，如文档中所述：

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

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

此外，如果您只使用 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',
    }
},
于 2020-05-17T09:59:09.627 回答
0

试试webpack.ProvidePlugin你的 webpack 配置：

import自动加载模块，而不必require 到处加载。

例子：

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

文档中有关“匀场”的更多信息。

于 2018-09-21T23:43:25.203 回答