8

我对 webpack 相当陌生，我有一个使用vue cli. 在使用 分析 webpack 包（使用 内置于生产模式vue-cli-service build）webpack-bundle-analyzer时，我发现一个特定文件bn.js多次包含在包中。运行时npm ls bn.js我发现它的父依赖就是webpack它本身。

`-- webpack@4.44.1
  `-- node-libs-browser@2.2.1
    `-- crypto-browserify@3.12.0
      +-- browserify-sign@4.2.1
      | +-- bn.js@5.1.3
      | +-- browserify-rsa@4.0.1
      | | `-- bn.js@4.11.9
      | +-- elliptic@6.5.3
      | | `-- bn.js@4.11.9
      | `-- parse-asn1@5.1.6
      |   `-- asn1.js@5.4.1
      |     `-- bn.js@4.11.9
      +-- create-ecdh@4.0.4
      | `-- bn.js@4.11.9
      +-- diffie-hellman@5.0.3
      | +-- bn.js@4.11.9
      | `-- miller-rabin@4.0.1
      |   `-- bn.js@4.11.9
      `-- public-encrypt@4.0.3
        `-- bn.js@4.11.9

所以我的问题是，为什么在项目中将 webpack 添加为 devDependency（之前它是一个依赖项，然后我将其更改为 devDepenency）时，webpack 在最终包中包含它自己的依赖项？

或者，如果这是正确的行为，请指出我解释此行为的任何文档/资源。

4

3 回答 3

1

好吧，事实证明这是一个 npm 的事情。早些时候，我将 webpack 作为package.json. 然后我跑了npm uninstall webpack --save，然后又跑了npm install webpack --save-dev，以使其成为开发依赖项。事实证明这还不够。只有在我删除了我的 node_modules 文件夹然后再次执行 npm install 之后，我才停止在我的包中获取 webpack 依赖项。

于 2020-08-20T04:25:46.033 回答
0

关于我如何找到问题所在框架的提示。在 Webpack 配置中，我设置了 {node: false} 然后我构建了生产代码。Webpack 应该标记有问题的框架。对于最初为服务器端编写并期望某些包可用并且不会显示在 package-lock.json 上的代码，这可能是一个问题。

如果你正在使用 create-react-app 之类的东西，那么你可以使用 react-app-rewired 之类的框架来自定义 Webpack 配置。

快乐未使用的代码破坏！

于 2021-07-03T06:51:33.140 回答
0

我遇到了一个类似的问题，我无法找到为什么要导入名为 bn.js、elliptic 等的库。

事实证明，这是因为我们正在使用一个名为[generate-password][1]正在导入crypto的库，因此我看到了多个我从未导入过的模块。看看下面这张图片。

bn.js 和 elliptic 的许多实例

如果您发现自己处于无法在代码库中找到特定库的导入语句的情况，只需执行以下操作：

npm ls libname

库名称上 npm ls 的结果

在某些情况下，有些库会在内部导入这些方法，因此会导致您的供应商捆绑包膨胀。在 的情况下generate-password，它正在从节点导入加密模块。整个模块最终出现在供应商捆绑包中，因为generate-password它使用了加密模块中的一个功能。

我如何避免导入加密货币：

  1. 将生成密码源代码作为实用程序复制到我的代码库中。
  2. 将加密库中的 randomBytes 函数替换为 randomBytes 的特定npm 版本。
  3. 删除 node_modules 并使用 yarn/npm 重建。
于 2021-09-08T14:43:35.987 回答