如何配置electron-builder打包react-native-electron而非react-native？

我最近碰到个棘手的问题：已经在webpack里把react-native的别名指向了react-native-electron，开发环境下用electron-webpack dev构建运行完全正常，但一执行electron-builder install-app-deps就报错，说找不到react-native依赖。试了几种歪招都没解决，要么能打包但启动后窗口无响应，要么干脆启动失败，下面详细说说我的情况和可行的解决办法。

我的环境与踩坑记录 #

• 系统：Ubuntu
• 开发构建：electron-webpack dev完全正常，webpack的别名生效没问题
• 踩坑1：执行yarn add react-native后能完成构建，但启动应用后窗口彻底无响应
• 踩坑2：复制react-native-electron文件夹并重命名为react-native，能构建但应用无法正常启动，系统监视器里只显示进程但无实际运行状态
• 未安装react-native时执行electron-builder install-app-deps的报错信息：

Error: Unresolved node modules: react-native at /media/dj/dev/scan-app-desktop/node_modules/electron-builder-lib/src/util/packageDependencies.ts:108:17
From previous event:
at Collector.resolveUnresolvedHoisted (/media/dj/dev/scan-app-desktop/node_modules/electron-builder-lib/src/util/packageDependencies.ts:164:10)
at /media/dj/dev/scan-app-desktop/node_modules/electron-builder-lib/src/util/packageDependencies.ts:82:18
at Generator.next (<anonymous>)
at runCallback (timers.js:763:18)
at tryOnImmediate (timers.js:734:5)
at processImmediate (timers.js:716:5)
From previous event:
at Collector.collect (/media/dj/dev/scan-app-desktop/node_modules/electron-builder-lib/src/util/packageDependencies.ts:84:6)
at /media/dj/dev/scan-app-desktop/node_modules/electron-builder-lib/out/util/packageDependencies.js:123:47
at Generator.next (<anonymous>)
(...)

我的配置文件 #

package.json中的electronWebpack配置 #

"electronWebpack": {
  "renderer": {
    "webpackConfig": "webpack.renderer.additions.js"
  }
},

webpack.renderer.additions.js中的别名配置 #

const path = require('path')
const resolve = {
  alias: {
    'react-native': path.join(__dirname, 'node_modules/react-native-electron')
  }
}
module.exports = {resolve}

可行的解决办法 #

核心问题在于：electron-builder的install-app-deps是直接解析package.json里的依赖声明，完全不会读取webpack的别名配置，所以它会认为你缺失react-native这个依赖。我们需要从依赖管理的层面让electron-builder接受这个“替换”，同时保证打包时正确使用react-native-electron。

方法1：把react-native设为可选依赖（推荐） #

在package.json里把react-native加入optionalDependencies，这样electron-builder会跳过强制安装它，而webpack的别名依然会在构建时替换引用：

"optionalDependencies": {
  "react-native": "*"
}

配置后执行yarn install（或npm install），再运行electron-builder install-app-deps就不会报错了，打包后的应用也能正常启动。

方法2：用yarn的resolutions强制替换依赖（yarn专属） #

如果你用yarn作为包管理器，可以在package.json里添加resolutions字段，让yarn在安装时直接把react-native替换为react-native-electron：

"resolutions": {
  "react-native": "npm:react-native-electron@latest"
}

这样不管是开发还是打包环节，yarn都会把所有对react-native的依赖请求指向react-native-electron，electron-builder自然不会再报错找不到依赖，而且不需要额外维护webpack别名（当然保留别名也没问题）。

方法3：关闭electron-builder的依赖检查（不推荐） #

在package.json的build字段中添加配置，让electron-builder跳过所有依赖的检查：

"build": {
  "packageDependencies": false
}

这个方法虽然能解决报错，但会跳过所有依赖的合法性检查，可能导致其他依赖问题被隐藏，所以除非万不得已不建议使用。

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