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

Question

我正在构建一个 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 }

根据多个指南，我必须在多个位置调整我的设置，但其中 none 个有效。谁能指出哪些是正确的更改，哪些是我可以忽略或还原的？

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/",
    }
  },

Answer 1

1.Run npm install stream-browserify.

2.Add tsconfig.json中的路径映射：

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

3.Add 在 angular.json 中流向 allowedCommonJsDependencies:

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

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

How to upgrade webpack 5 when using Angular 13 for Electron app?

webpack

electron

angular

webpack-5

angular.json

tsconfig.json

webpack.config.js