预加载脚本未加载到打包的应用程序中

Question

我制作了一个需要加载预加载 js 文件的小型 Electron 应用程序。

当我用 启动应用程序时electron .，它会找到该文件，但是当应用程序被打包时，它却找不到。

调用是在这里进行的：

mainWindow = new BrowserWindow({
   width: 800,
   height: 600,
   webPreferences: {
     nodeIntegration: false, 
     nativeWindowOpen: true,
     webSecurity: false,
     preload: path.join(__dirname, 'preload.js')  
  }
})

我的简化 package.json：

"name": "app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
  "start": "electron .",
  "build": "electron-packager . --platform=win32 --arch=x64 --overwrite"
 }
"devDependencies": {
  "electron": "^1.8.4",
  "electron-packager": "^12.0.1",
}

我的项目结构：

- 节点模块

- main.js

- 预加载.js

- 包.json

我已经检查了结果，path.join在这两种情况下，路径都是正确的，并且文件在那里。

Answer 1

对于使用 Electron Forge webpack typescript 样板的人们：

1. 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"
                  }
                }
              ]
            }
          }
        ]
      ]
    }
  }
}

预加载脚本可以是打字稿文件。

2. 添加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,
    }
  });

3. 在preload.ts写：

import {
  contextBridge,
  ipcRenderer
} from 'electron';

contextBridge.exposeInMainWorld(
  'electron',
  {
    doThing: () => ipcRenderer.send('do-a-thing')
  }
)

4. 添加index.d.ts文件，写入：

declare global {
  interface Window {
    electron: {
      doThing(): void;
    }
  }
}

5. 启动您的应用程序，您可以在开发控制台中键入electron并查看它的定义。

6. 奖励：为 contextBridge 公开的 API 正确输入：

为什么要分开打？不确定是否需要，但我不想从渲染器进程中包含主进程代码（如 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);

学分：

• @deadcoder0904 在对之前答案的评论中为我们提供了解决方案，这是他链接的 github 问题： https://github.com/electron-userland/electron-forge/issues/1590
• index.d.ts打字和小示例用法contextBridge：https://github.com/electron/electron/issues/9920#issuecomment-743803249

也可以看看：

• 有关安全性的说明以及使用 IPC 的示例：https://github.com/electron/electron/issues/9920#issuecomment-575839738

Answer 2

预加载脚本需要指定为绝对路径。因此，它与在开发中运行它的时间和打包为 asar 文件运行它的时间有所不同。

const getSourceDirectory = () => isDev()
    ? path.join(process.cwd(), 'build', 'src') // or wherever your local build is compiled
    : path.join(process.resourcesPath, 'app', 'src'); // asar location

const preload = path.resolve(getSourceDirectory(), 'preload.js');