用于 node.js crypto-js 的 webpack 5 angular polyfill

Question

我有关于 webpack 5 配置的基本问题，因为我对它的经验为零。我想创建最简单的 Angular 应用程序，它使用node.js模块crypto-js和SHA256。

在 webpack 5 之前，它非常简单。你不必担心 webpack，它在后面的某个地方。

在命令提示符下，我做了：ng new TestApp -> cd TestApp -> npm install crypto-js -> npm install --save @types/crypto-js -> 用导入的 SHA256 编写简单的测试代码 -> 构建它 -> 它工作！

现在我收到消息：

突破性变化：webpack < 5 用于默认包含 node.js 核心模块的 polyfill。不再是这种情况。验证您是否需要此模块并为其配置 polyfill。

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - 安装 'crypto-browserify' 如果你没有想要包含一个 polyfill，你可以使用一个空的 >module，如下所示：resolve.fallback: { "crypto": false }

我必须安装这个模块并将这个 polyfill 包含在配置文件中。问题是如何编写最简单的 webpack.config.js，除了这些行之外，放在哪里以及在其中包含什么？

BR

Answer 1

我遇到了同样的问题，这是我在 git hub 上找到的有效解决方案。 https://github.com/ChainSafe/web3.js/issues/4070

在您的项目目录中运行：

npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify

tsconfig.json 添加以下内容："compilerOptions": { [...] }

"paths" : {
      "crypto": ["./node_modules/crypto-browserify"],
      "stream": ["./node_modules/stream-browserify"],
      "assert": ["./node_modules/assert"],
      "http": ["./node_modules/stream-http"],
      "https": ["./node_modules/https-browserify"],
      "os": ["./node_modules/os-browserify"],
    }

Answer 2

升级到 Angular 12 后我遇到了这个问题，所以在搜索后我最终做了以下事情：

在tsconfig.json我添加了：

    {
      "compilerOptions": {
        "paths":{
          "crypto":["node_modules/crypto-js"]
        }
     }
    }

在angular.json 中，我添加了：

     {
    "architect": {
            "build": {
              "options": {
                "allowedCommonJsDependencies": ["crypto"],
              }
            }
        }
    }

警告消失了。我希望这会帮助你。

Answer 3

以下步骤将有助于解决此问题

• 安装和 的browserify端口cryptostream

  npm install crypto-browserify stream-browserify
  

• 在tsconfig.json编译器选项下，添加以下行。由于webpack不自动导出腻子，这些指定了一组将导入重新映射到其他查找位置的条目。

  "paths":{
  "crypto":["node_modules/crypto-browserify"],
  "stream":["node_modules/stream-browserify"]
  }
  

• 在angular.json下面architect->build->options添加以下行，该行表示crypto应使用 CommonJS 包，而无需生成时间警告。

  "allowedCommonJsDependencies": ["crypto"]
  

^{注意：阅读browserify 的作用。}

Answer 4

除了@Nicolas 的回答之外，我还遇到了“全局未定义”的问题。

为了解决这个问题，我必须将这些行添加到 'polyfills.ts' 中：

(window as any).global = window; 
(window as any).process = {
   env: {DEBUG: undefined},
};

Answer 5

遗憾的是，Webpack 配置被 Angular 隐藏，只允许您访问 AngularCli 公开的一些选项。

但是，您可以使用包@angular-builders/custom-webpack但是，您可以使用效果很好的它很容易使用，你可以替换一些 webpack 选项，而不会破坏 Angular 提供的所有配置。

所以，在你的情况下，你可以添加一个crypto-browserify作为“加密”的后备。在这种情况下，你的 webpack 额外配置文件将如下所示：

{ 解析：{ 后备：{ 加密：“./node_modules/crypto-browserify” } } }