Electron Forge - 在渲染器文件中使用 ipcRenderer
Electron Forge - Use ipcRenderer in the renderer file
行为
我正在开发一个 Electron Forge 项目。当我尝试使用 electron.ipcRenderer 时，它会导致错误，应用程序无法启动。它显示了一些信息，但没有用：
An unhandled rejection has occurred inside Forge:
[Error: EISDIR: illegal operation on a directory, read] {
errno: -4068,
code: 'EISDIR',
syscall: 'read'
}
Electron Forge was terminated. Location:
{}
error Command failed with exit code 1.
我之前用 Electron forge 创建了一个 Electron 项目，在 ipcRenderer
下工作正常
只有在 typescript 中导入才会导致错误，require 在 HTML 中工作正常
更多信息
electron.ipcRenderer 和 electron.remote 都会导致问题，但导入而不使用不会导致错误。
Window 创建代码：
const mainWindow = new BrowserWindow({
height: 540,
width: 960,
resizable: false,
frame: false,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
},
});
中的解析无效，是在preload.ts
中访问ipcRenderer
环境
重要的软件包版本
"@electron-forge/cli": "^6.0.0-beta.57",
"typescript": "^4.0.2"
"electron": "^13.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
OS
Windows 10 x64, CoreCountrySpecific (aka. 家庭中文版或中文家庭版), 版本 2009, 21H1 (19043.1083), Windows 功能体验包 120.2212.3530.0.
CPU：英特尔(R) 酷睿(TM) i7-10750H CPU @ 2.60GHz 2.59 GHz
GPU：NVIDIA GeForce GTX 1660 Ti
可能的原因
- Webpack 无法编译 electron，应该直接编译
require('electron')，而不是将 electron 代码注入到文件中
- 如果在这种情况下，如何配置 webpack 使其不将 electron 编译到文件中？
- 电子锻造问题
- 此电子版和电子锻造版不能同时使用
- 如果是这种情况，我应该提供哪个版本？
- React.js问题
- 如果在这种情况下，我应该删除 React 还是使用 React 16？
使用preload.ts，从electron导入模块，并在window上声明。
例如：
preload.ts
// noinspection ES6UnusedImports
import { ipcRenderer, remote } from 'electron'; // eslint-disable-line @typescript-eslint/no-unused-vars
/* eslint-disable @typescript-eslint/no-explicit-any */
window.ipcRenderer = ipcRenderer;
window.remote = remote;
/* eslint-enable */
index.d.ts:
interface Window {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ipcRenderer: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
remote: any;
}
使用：
window.remote.dialog.showSaveDialogSync({});
window.ipcRenderer.send('close');
行为
我正在开发一个 Electron Forge 项目。当我尝试使用 electron.ipcRenderer 时，它会导致错误，应用程序无法启动。它显示了一些信息，但没有用：
An unhandled rejection has occurred inside Forge:
[Error: EISDIR: illegal operation on a directory, read] {
errno: -4068,
code: 'EISDIR',
syscall: 'read'
}
Electron Forge was terminated. Location:
{}
error Command failed with exit code 1.
我之前用 Electron forge 创建了一个 Electron 项目，在 ipcRenderer
只有在 typescript 中导入才会导致错误，require 在 HTML 中工作正常
更多信息
electron.ipcRenderer 和 electron.remote 都会导致问题，但导入而不使用不会导致错误。
Window 创建代码：
const mainWindow = new BrowserWindow({
height: 540,
width: 960,
resizable: false,
frame: false,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
},
});
环境
重要的软件包版本
"@electron-forge/cli": "^6.0.0-beta.57",
"typescript": "^4.0.2"
"electron": "^13.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
OS
Windows 10 x64, CoreCountrySpecific (aka. 家庭中文版或中文家庭版), 版本 2009, 21H1 (19043.1083), Windows 功能体验包 120.2212.3530.0.
CPU：英特尔(R) 酷睿(TM) i7-10750H CPU @ 2.60GHz 2.59 GHz
GPU：NVIDIA GeForce GTX 1660 Ti
可能的原因
- Webpack 无法编译 electron，应该直接编译
require('electron')，而不是将 electron 代码注入到文件中- 如果在这种情况下，如何配置 webpack 使其不将 electron 编译到文件中？
- 电子锻造问题
- 此电子版和电子锻造版不能同时使用
- 如果是这种情况，我应该提供哪个版本？
- React.js问题
- 如果在这种情况下，我应该删除 React 还是使用 React 16？
使用preload.ts，从electron导入模块，并在window上声明。
例如：
preload.ts
// noinspection ES6UnusedImports
import { ipcRenderer, remote } from 'electron'; // eslint-disable-line @typescript-eslint/no-unused-vars
/* eslint-disable @typescript-eslint/no-explicit-any */
window.ipcRenderer = ipcRenderer;
window.remote = remote;
/* eslint-enable */
index.d.ts:
interface Window {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ipcRenderer: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
remote: any;
}
使用：
window.remote.dialog.showSaveDialogSync({});
window.ipcRenderer.send('close');