快速打包React+Electron项目

背景

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

打包React项目

首先修改main.js
因为现在你要将react项目打包在build文件夹下面，所以加载应用处改成如下：

// 加载应用----react 打包
mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, './build/index.html'), // 注意这里修改
  protocol: 'file:',
  slashes: true
}))
// 加载应用----适用于 react 开发时项目
// mainWindow.loadURL('http://localhost:3000/');

然后配置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模块后，不管是通过window.require引入还是通过preload脚本注入，都会导致打出的包运行起来是空屏。
为此可以通过electron-builder或electron-forge来进行打包，亲测这两个打包工具不存在这个问题，打包出来的效果跟开发时的效果一致。