React搭配Electron开发时如何分离主进程与渲染进程的依赖

问题原因 #

你当前配置中全局排除了整个node_modules目录，导致主进程运行必需的依赖也被排除，无法正常加载。同时你将渲染进程、主进程的所有依赖都放在外层的dependencies中，electron-builder无法自动区分两类依赖。

方案一：直接修改打包规则（无需调整目录结构） #

修改package.json中build.files配置，按「先包含需要的主进程依赖、再排除剩余所有node_modules」的顺序写规则，electron-builder会自动按照规则优先级处理：

"files": [
  "./build/**/*",
  "./public/electron.js",
  // 只保留主进程用到的依赖，electron-builder会自动打包这些依赖的所有子依赖，不需要手动添加子依赖
  "node_modules/electron-is-dev/**/*",
  "node_modules/electron-updater/**/*",
  "!node_modules/**/*"
],

如果后续新增主进程依赖，只需要在排除规则前新增对应依赖的包含规则即可。

方案二：拆分主进程/渲染进程依赖（更易长期维护） #

这是Electron + React技术栈的标准实践，避免后续依赖管理混乱：

1. 新建electron目录，将原public/electron.js移入该目录
2. 在electron目录下新建独立的package.json，仅声明主进程需要的依赖：

{
  "name": "electron-main",
  "version": "0.16.2",
  "main": "electron.js",
  "dependencies": {
    "electron-is-dev": "^2.0.0",
    "electron-updater": "^4.3.9"
  }
}

3. 修改外层package.json配置：

• 调整main字段："main": "electron/electron.js"
• 调整build.files配置，无需手动排除node_modules，electron-builder会自动忽略外层的渲染进程依赖：

"files": [
  "./build/**/*",
  "./electron/**/*"
],

4. 后续安装依赖时，渲染进程依赖在外层目录执行安装，主进程依赖进入electron目录执行安装即可。

两种方案都可以保证最终打出来的app.asar仅包含主进程必要依赖，不会包含任何渲染进程的冗余依赖，体积和你预期的一致。

内容的提问来源于stack exchange，提问作者abin