如何向expo-electron应用正确添加preload.js脚本？

问题核心原因 #

preload加载失败基本是两个问题导致：

• 传入的preload路径不是绝对路径，Electron无法定位到文件
• @expo/electron-adapter默认打包规则不会主动把preload.js作为主进程资源打包进产物，运行时目标路径下根本不存在该文件

修复步骤 #

1. 修正preload路径配置
   你当前写的path.join('preload.js')属于无效路径，path.join仅传入单段字符串时不会解析到electron/main目录，必须结合主进程运行时的__dirname变量拼接绝对路径，创建BrowserWindow时的配置修改为：

const path = require('path');

const mainWindow = new BrowserWindow({
  // 其他窗口配置...
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    // 保持和expo默认安全配置一致，避免出现上下文隔离相关问题
    contextIsolation: true,
    nodeIntegration: false
  }
});

注意：只要你的主进程入口文件和preload.js同放在electron/main目录下，上述路径写法在开发、生产环境均可正常定位到文件。

2. 配置webpack打包规则，让preload.js被正常编译输出
   @expo/electron-adapter底层基于electron-webpack做主进程代码打包，默认只会识别主进程入口文件，不会处理同目录下的preload脚本。需要在项目根目录新建/修改electron-webpack.json配置文件，添加preload入口声明：

{
  "main": {
    "extraEntries": ["@expo/electron-adapter/entry/main"],
    "preload": {
      "entry": "./electron/main/preload.js"
    }
  }
}

3. 验证生效
   配置修改完成后，完全关闭当前expo electron开发服务（主进程配置修改不支持热重载，必须重启），重新执行启动命令。可以在preload.js中添加一行测试日志：

// electron/main/preload.js
console.log('preload script loaded successfully');

启动后查看主进程终端输出，出现上述日志就代表preload已经正常加载。

常见避坑点 #

• 不要把preload.js放在渲染进程代码目录（比如项目根目录的src文件夹），必须放在electron主进程专属目录下
• 不要用相对路径（比如./preload.js）配置preload，Electron的preload参数要求传入绝对路径，相对路径会基于Electron启动目录解析，大概率定位错误
• 生产构建后可以检查打包产物的resources/app目录下是否存在编译后的preload.js文件，确认打包环节没有遗漏该资源

内容的提问来源于stack exchange，提问作者Siva Nagendra Kumar Vepada