在Angular 15 + Electron 22项目中使用iprenderer会导致构建错误 &g

Question

我正在尝试在Angular服务中使用ipcRenderer。我的项目只能在电子环境中工作。如果我尝试使用标准构建器，我会得到以下错误:

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: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }

如果我使用esbuild构建器，这是我得到的:

X [ERROR] Could not resolve "fs"
node_modules/electron/index.js:1:19:
1 │ const fs = require('fs');
╵                    ~~~~
The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

我试着把

"platform: 'node'"

在tsconfig文件和angular中都有。Json文件，但似乎不是一个有效的选项。

如果我将此块添加到package.json:

"browser": {
"path": false,
"fs": false
}

ERROR Error: Uncaught (in promise): ReferenceError: __dirname is not defined

即使我没有使用__dirname在浏览器代码的任何地方。

我该怎么做才能让它工作?

Answer 1

Electron有两个独立的进程——渲染进程，运行在绑定的web浏览器(ipcRenderer)中，而主进程，运行在node.js进程中。

因此，你可以在主进程中使用核心node.js模块，但不能在ipcRenderer中使用，因为这些模块(例如fs)在浏览器中不可用。

听起来你想在渲染器(你的Angular应用)中使用fs。这是行不通的。

例如，如果你想从文件系统中读取数据并在浏览器中显示它，你将不得不使用Electron的进程间通信，让Angular请求主进程读取文件，然后从主进程异步地将内容传递回渲染器。