用于 node.js crypto-js 的 webpack 5 角度 polyfill答案

【问题标题】：webpack 5 angular polyfill for node.js crypto-js用于 node.js crypto-js 的 webpack 5 角度 polyfill
【发布时间】：2021-08-06 20:56:58
【问题描述】：

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

在 webpack 5 之前，这非常简单。你不必担心 webpack，它就在后面。

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

现在我收到消息：

重大变化：webpack

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

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

BR

【问题讨论】：

标签： angular webpack config

【解决方案1】：

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

在 tsconfig.json 我添加了：

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

我在 angular.json 中添加了：

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

警告消失了。希望对您有所帮助。

【讨论】：

你是个破解者！非常感谢。
谢谢。在allowedCommonJsDependencies 中，我不得不称它为crypto-js，因为那是我加载的节点模块。
我必须使用 "stream": [ "../node_modules/stream-browserify" ]，注意两个点.. 因为我使用 "src" 作为 baseUrl

【解决方案2】：

我遇到了同样的问题，这是我在 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"],
    }

【讨论】：

经过 2 天的搜寻，这解决了我使用 Angular 12 没有加密的问题，尝试在不运行单独的节点服务器的情况下验证 AWS Cognito JWT。非常感谢你
这对我来说也适用于除加密之外的所有内容。我的包@toruslabs/eccrypto 依赖于它，我猜没有看到覆盖。有什么想法吗？
我在使用 bcryptjs 包和 Angular 13 时遇到了同样的问题。这解决了警告。我还必须将 "allowedCommonJsDependencies": ["crypto"] 添加到 angular.json，就像在 Wahib Kerkeni 回复中解释的那样

【解决方案3】：

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

但是，您可以使用运行良好的包@angular-builders/custom-webpack。它易于使用，您可以在不破坏 Angular 提供的所有配置的情况下替换一些 webpack 选项。

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

{ 解决：{ 倒退： { 加密：“./node_modules/crypto-browserify” } } }

【讨论】：

【解决方案4】：

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

为crypto 和stream 安装browserify 端口

npm install crypto-browserify stream-browserify

在编译器选项下的tsconfig.json 中，添加以下行。由于 webpack 不会自动导出 polyfill，因此它们指定了一组条目，将导入重新映射到其他查找位置。
```
"paths":{
"crypto":["node_modules/crypto-browserify"],
"stream":["node_modules/stream-browserify"]
}
```
在architect->build->options 下的angular.json 中添加以下行，说明 CommonJS 包crypto 应该在没有构建时间警告的情况下使用。
```
"allowedCommonJsDependencies": ["crypto"]
```

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

【讨论】：

【解决方案5】：

除了@Nicolas 的回答，我还有一个问题是“全局未定义”。

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

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

【讨论】：