使用 Angular 13 for Electron 应用程序时如何升级 webpack 5？

Posted 2023-03-22

【中文标题】使用 Angular 13 for Electron 应用程序时如何升级 webpack 5？

【英文标题】：How to upgrade webpack 5 when using Angular 13 for Electron app?

【发布时间】：2022-01-18 03:31:23

【问题描述】：

我正在构建一个 Electron 应用程序并使用 Angular v11 和 webpack v4。

我想同时升级到 Angular v13 和 webpack v5。大多数升级指南都参考了常见的 Web 应用程序，但考虑到 Electron 基础，我遇到了一些意想不到的问题。

我目前的问题是这个错误信息：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback:  "os": require.resolve("os-browserify/browser") '
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback:  "os": false 

根据一些指南，我必须在多个位置调整我的设置，但它们都不起作用。谁能向我指出哪些是正确的更改，哪些是我可以忽略或恢复的？

angular.json

allowedCommonJsDependencies: [
// add crypto, os, ...
"crypto", "os", ...
]

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

webpack.config.js

  resolve: 
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
    fallback: 
      crypto: "crypto-browserify",
      http: "stream-http",
      https: "https-browserify",
      os: "os-browserify/browser",
      path: "path-browserify",
      stream: "stream-browserify",
      process: "process/browser",
      url: "url/",
    
  ,

【参考方案1】：

1.运行npm install stream-browserify。

2.在tsconfig.json中添加路径映射：

...
"compilerOptions": 
  "paths": 
    "stream": [ "./node_modules/stream-browserify" ]
  ,

3.在angular.json中添加流到allowedCommonJsDependencies：

"options": 
  "allowedCommonJsDependencies": [
    "angular-slickgrid", "stream"
  ],

【讨论】：

感谢您的回答。 stream 只是所有其他类型模块的示例吗？

stream 是以前包含在 WebPack 4 中的 polyfill，现在不再包含在 WebPack 5 中，但您可以按照此答案中显示的步骤简单地重新安装它，这些步骤与显示的步骤相同在我的库 Angular-Slickgrid 中，所以这个答案可能是有效的，因为我的库正在按照这些说明使用 Angular 13，但是我无法回答 Electron，因为我从未使用过它