快速打包React+Electron项目

背景

上一篇博客介绍了如何快速搭建React + Electron的开发环境，简单应用开发完毕后需要打包成应用程序，比如你需要把你开发的App发给其他人使用。
下面基于上一篇博客内容进一步介绍如何打包：

打包React项目

注意：这一步是打包React项目，因此与main.js无关
首先配置homepage字段
在package.json文件中添加如下配置：

{
	"homepage": "."
}

最后打包react代码，根目录下面将多出一个build文件夹

npm run build

打包Electron

首先安装electron-packager

npm install electron-packager -D

然后在package.json文件中添加如下代码：

{
	"script": {
		"package": "electron-packager ./build react_electron_demo0 --platform=darwin --arch=x64 --electron-version 17.1.0 --overwrite"
	}
}

接下来很重要的一步操作：
将main.js和package.json两个文件复制到build文件夹下，同时修改build文件夹下的main.js

// 加载应用----electron默认的打包入口
win.loadURL(url.format({
  pathname: path.join(__dirname, './index.html'), // 修改这里
  protocol: 'file:',
  slashes: true
}))

最后开始打包

npm run package

打包成功！点击应用程序运行：

后记

综合以上两篇博客的内容可完成React + Electron应用的打包，当需要在渲染进程使用node时，只需要在main.js中配置:

webPreferences: {
  nodeIntegration: true,
  contextIsolation: false
},

除了electron-packager以外，electron-builder和electron-forge也可用于electron打包。