javascript - 为什么我的 Webpack 包包含两次 jQuery？

Question

我设置了一个具有 2 个子模块依赖项的父模块。父模块没有指定的 jQuery 依赖项，但每个子模块都指定 jQuery ^3.3.1 作为依赖项(每个子模块的结果为 3.4.1)。我对父模块进行了 Webpack，然后在生成的捆绑文件中看到 jQuery 3.4.1 被包含了两次。我应该怎么做才能避免相同版本的 jQuery 被包含两次？我确实尝试了 splitchunks 插件，它确实生成了 block ，但 jQuery 仍然在那里两次。我认为 Webpack 应该自动分析模块图中的依赖关系并优化捆绑的代码？我尚未测试 NPM 对等依赖项或 Webpack 重复数据删除插件。我还想知道 jQuery 本身是否有一些 Webpack 无法/决定不自动删除重复数据的地方？

在两个子模块的index.js 文件中，我使用:

import $ from "jquery"

在每个子模块的 package.json 中我指定:

"dependencies": {
"jquery" : "^3.3.1"
}

然后我在每个子模块上安装了 npm。

Answer 1

module.exports = {
    resolve: {
        alias: {
            // fix every jQuery to our direct jQuery dependency. Shariff 1.24.1 brings its own jQuery and it would be included twice without this alias.
            'jquery': __dirname + '/node_modules/jquery/',
        },
    },
};

注意 - 发生这种情况是因为 Shariff 1.24.1 将 jQuery 定义为其自己的依赖项，而不是在 package.json 中将其定义为对等依赖项。

Refrence