用于 Node.js crypto-js 的 webpack 5 Angular Polyfill

问题描述 投票:0回答:7

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

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

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

现在我收到消息:

重大变更:webpack < 5 used to include polyfills for node.js core modules by default. This is no >更长的外壳。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill,你需要: - 添加后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - 安装“crypto-browserify”如果你不想包含一个polyfill,你可以使用一个空的>模块,如下所示: solve.fallback: { "crypto": false }

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

BR

angular webpack config
7个回答
37
投票

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


34
投票

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

tsconfig.json 我添加了:

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

angular.json 我添加了:

     {
    "architect": {
            "build": {
              "options": {
                "allowedCommonJsDependencies": ["crypto"], // note that this is the key of --> "crypto":["node_modules/crypto-js"]"
              }
            }
        }
    }

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


8
投票

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

  • 安装

    browserify
    crypto
    stream

    端口
    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
    添加以下行,表示应在没有构建时间警告的情况下使用 CommonJS 包
    crypto

    "allowedCommonJsDependencies": ["crypto"]
    

注意:阅读 browserify 的作用。


6
投票

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

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

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

4
投票

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

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

因此,就您而言,您可以添加 crypto-browserify 作为“crypto”的后备。在这种情况下,你的 webpack 额外配置文件将如下所示:

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


0
投票

虽然有点晚了,但我的愚蠢错误可能会为某人节省大量时间。我不小心从组件中的express而不是角度导入了路由器。让我花了 3 天时间和偏头痛。


-1
投票

如果你在 vue 中并且错误以这样的方式开始:“找不到模块:错误:无法解析‘http’...”,安装

url-loader
就可以解决问题。只需使用 npm 安装即可。
npm install --save-dev url-loader

© www.soinside.com 2019 - 2024. All rights reserved.