代码之家 › 专栏 › 技术社区 › Justin

网页包4是树摇走引导,我怎样才能防止呢?

tree-shaking webpack angular javascript

Justin · 技术社区 · 6 年前

我试图得到一个使用Jquery模式插件的遗留应用程序,它需要bootstrap的javascript在使用自定义Webpack配置的angular6和webpack4项目中工作。一切都在工作,除了捆绑期间发生的树震动正在删除我的系统中的引导导入 vendor.ts 文件,因为我的应用程序中没有明确使用引导导入的位置。

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

注: 如果我加上如下内容:

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

给我的 main.ts

我已经尝试在我的列表中添加多个条目 package.json 中建议的副作用特性 the documentation 应该是 远离的。有没有办法将导入的模块标记为不

我也试过这样的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",
})

3 回复 | 直到 6 年前

hostar 6 年前

我遇到了同样的问题,解决方法如下:

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

改变这个

import * as bootstrap from "bootstrap";

为了这个

require("bootstrap");

Justin 6 年前

在对这个问题做了更多的挖掘之后,我在其他导入中遇到了类似的问题,根本问题是我在不止一个地方引用了第三方库。

换句话说,我正在导入JQuery、bootstrap和我的数据库中的其他库 main.ts ,我的 vendor.ts 提供羽扇豆素 . 一旦应用程序被捆绑,不同的引用就会相互冲突,这就在我的应用程序中造成了问题。

全部的 生活在曾经的地方,生活在曾经的地方。然后,我还将runtimeChunk添加到我的网页包配置中。

optimization: {
    runtimeChunk: "single"
}

这样可以确保所有代码都引用相同的库。签出文档 here . 我将把@hostar的答案保留为可接受的,因为他确实解决了我最初的问题。

jered 6 年前

webpack.ProvidePlugin 在您的网页包配置中:

import 或 require 到处都是。

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

More info about "shimming" in the documentation .

Francisco Puga 4 年前

in the documentation :

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

这样,您就不会加载完整的引导js,而是只加载您需要的东西。另外,如果您使用的是ProvidePlugin,则不需要将引导设置为全局,也不需要特殊的树震动配置。

如果你是使用jqueryforbootstrap,不需要为jQuery进行特殊配置。 bootstrap/js/dist/util.js 已经有了 import $ "from jquery"

jquery-slim 创建一个别名而不是“jquery”,这样 import "jquery" 将解析为slim模块。实际上,我总是将别名配置为指向完整版本或精简版本。我发现这样可以避免像两次意外导入jQuery这样的问题。。

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