对于使用 Electron Forge webpack typescript 样板的人:
- 在文件中添加
preload
密钥:package.json
{
"config": {
"forge": {
"plugins": [
[
"@electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/index.html",
"js": "./src/renderer.tsx",
"name": "main_window",
"preload": {
"js": "./src/preload.ts"
}
}
]
}
}
]
]
}
}
}
预加载脚本可以是打字稿文件。
- 添加
MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY
常量作为 的值preload
:
// Tell typescript about this magic constant
declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: any;
// [...]
const mainWindow = new BrowserWindow({
height: 1000,
width: 1500,
webPreferences: {
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
}
});
- 在
preload.ts
写:
import {
contextBridge,
ipcRenderer
} from 'electron';
contextBridge.exposeInMainWorld(
'electron',
{
doThing: () => ipcRenderer.send('do-a-thing')
}
)
- 添加
index.d.ts
文件,写入:
declare global {
interface Window {
electron: {
doThing(): void;
}
}
}
启动您的应用程序,在您的开发控制台中,您可以键入electron
并查看它的定义。
奖励:为 contextBridge 公开的 API 正确输入:
为什么要分开 fie ?不确定是否需要,但我不希望在渲染器进程中从包含主进程代码(如 preload.ts)的文件中导入接口。
// exposed-main-api.model.ts
export interface ExposedMainAPI {
doThat(data: string): Promise<number>;
}
// index.d.ts
declare global {
interface Window {
electron: ExposedMainAPI
}
}
// preload.ts
import {
contextBridge,
ipcRenderer
} from 'electron';
const exposedAPI: ExposedAPI = {
// You are free to omit parameters typing and return type if you feel so.
// TS know the function type thanks to exposedAPI typing.
doThat: (data) => ipcRenderer.invoke('do-that-and-return-promise', data)
};
// note: this assume you have a `ipcMain.handle('do-thing-and-return-promise', ...)`
// somewhere that return a number.
contextBridge.exposeInMainWorld('electron', exposedAPI);
学分:
也可以看看: