webpack 5 node.js crypto-js的Angular 多边形填充

tjjdgumg  于 2022-11-13  发布在  Webpack
关注(0)|答案(6)|浏览(255)

我有一些关于Webpack 5配置基本问题,因为我对它没有经验。我想创建最简单的Angular应用程序,使用 node.js module crypto-js 和 * SHA 256 *。
在Webpack 5之前,它是相当简单的。你不必担心Webpack,它在后面的某个地方。
在命令提示符中我做了:使用导入的SHA 256编写简单的测试代码--构建它并且--它工作了!
现在我得到消息:
突破性变化:webpack〈5过去默认包含node.js核心模块的polyfill。现在不再是这样了。请确认您是否需要这个模块并为它配置polyfill。
如果要包括多边形填充,则需要:- 添加回退'resolve.回退:{“加密”:require.resolve(“crypto-browserify”)}' - install 'crypto-browserify'如果你不想包含一个polyfill,你可以像这样使用一个空的〉模块:resolve.fallback:{“加密”:错误}
我必须安装这个模块,并在配置文件中包含这个polyfill。问题是如何编写最简单的webpack.config.js,把它放在哪里,除了这些行之外还包括什么?
布雷尔

ih99xse1

ih99xse11#

我在升级到Angular 12后遇到了这个问题,所以在搜索后我最终做了以下操作:
tsconfig.json中,我添加了以下内容:

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

又在棱角分明的.庄生中我补充了一句:

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

而且警告也不见了,希望这能帮到你。

3ks5zfa0

3ks5zfa02#

我遇到了同样的问题,这是我在git hub上找到的工作解决方案。https://github.com/ChainSafe/web3.js/issues/4070
在项目目录中运行:

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

将此添加到:“编译器选项”:【......】

"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"],
    }
m3eecexj

m3eecexj3#

以下步骤将帮助解决此问题

  • cryptostream安装browserify端口
npm install crypto-browserify stream-browserify
  • tsconfig.json中的编译器选项下,添加以下行。由于webpack不会自动导出多边形填充,因此这些行指定了一组将导入重新Map到其他查找位置的条目。
"paths":{
"crypto":["node_modules/crypto-browserify"],
"stream":["node_modules/stream-browserify"]
}
  • architect->build->options下的angular.json中,添加下面的行,说明CommonJS包crypto应在没有构建时警告的情况下使用。
"allowedCommonJsDependencies": ["crypto"]

注意:阅读browserify的功能。

mpgws1up

mpgws1up4#

可悲的是,webpack配置是隐藏的Angular,只给予你访问一些选项所暴露的AngularCli。
不过你可以使用包@angular-builders/custom-webpack,它很好用,你可以替换一些webpack选项,而不会破坏Angular提供的所有配置。
因此,在您的情况下,您可以添加一个crypto-browserify作为“crypto”的后备。在这种情况下,您的webpack额外配置文件将如下所示:
{解决:{回退:{加密:“./节点模块/加密浏览器化”} }}

r1zhe5dt

r1zhe5dt5#

除了@Nicolas的回答,我还遇到了一个问题,即“全局未定义”。
为了解决这个问题,我不得不将这些行添加到“polyfills.ts”中:

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

f0brbegy6#

如果您在vue中,并且错误开始时显示为"未找到模块:错误:无法解析'http' ...'安装url-loader就可以了。只要使用npm安装即可。npm install --save-dev url-loader

相关问题