初始化
创建项目
以普通的React应用做基础，一步步初始化项目。预先安装yarn工具，用yarn来创建一个React应用项目，假设名字叫demo，再引入Electron依赖。
1 | $ cd /PATH/TO/PROJECTS |
配置入口文件
创建项目后，大致的目录结构如下：
1 | |-->demo |
一般来说，React应用（测试环境下）的入口文件就是public/index.html，而Electron应用的入口文件最好也放在public目录下，并命名为electron.js（这样electron-builder可以自动识别）。
先在package.json中lectron应用的入口文件，添加main配置：
1 | { |
public/electron.js代码：
1 | const { app, BrowserWindow } = require('electron') |
在执行执行yarn electron ./命令就可以启动Electron应用了，不过React应用还没启动起来。
启动应用
一般用yarn react-scripts start命令，就可以将React应用挂载在本地3000端口上（ http://localhost:3000 ），用于开发调试。要用React结合Electron一起开发调试，先安装electron-is-dev来识别当前是否开发环境。
1 | $ yarn add electron-is-dev |
一般开发环境是加载http://localhost:3000/，正式环境是加载../build/index.html文件，所以修改public/electron.js代码（createWindow函数内）：
1 | const isDev = require('electron-is-dev') |
然后，在项目目录下，打开两个终端，一个执行yarn react-scripts start，一个执行yarn electron ./，就可以开发调试React + Electron应用了。
不用羡慕electron-vue，可以一句命令可以直接启动，其实原理是一样的。
要实现一句命令启动也不难，只要把两句命令合到一起执行就可以了。先安装工具库：
1 | $ yarn add concurrently --dev |
修改package.json，添加一个electron-dev脚本命令：
1 | { |
这样，执行一句yarn electron-dev就可以启动React + Electron应用了。
JS运行时
一般来说，浏览器提供一种JS运行时，NodeJS提供另一种JS运行时，Electron则是将这两种运行时结合到一起来提供。不过，这两种运行时并不是完美地和睦相处，比如说使用webpack时，通过webpack打包的JS代码中，不能直接通过import关键字或者require函数来引入NodeJS提供的功能接口，因为webpack覆盖了NodeJS自带的require函数。
不过Electron中，window对象的require属性会映射到NodeJS自带的require函数上，比如要调用NodeJS提供的http接口，可以这样写：
1 | const http = window.require('http') |
重新编译NodeJS扩展
通常，纯JS代码实现的工具库都可以在Electron环境中运行。不过有些NodeJS的工具库并不是纯JS代码实现的，比如node-sqlite3。node-sqlite3是C++编写，算是NodeJS的扩展，而不是单纯的工具库。node-sqlite3需要针对Electron环境重新编译，才能在Electron环境中运行。
electron-rebuild
electron-rebuild是专门Electron环境针对重新编译NodeJS扩展的一个工具。
在项目目录下，安装electron-rebuild：
1 | $ yarn add electron-rebuild --dev |
比如，重新编译node-sqlite3，只需要：
1 | $ yarn electron-rebuild -f -w sqlite3 |
在MacOS系统上就是这么简单，在Windows系统就复杂一些。
Windows系统上重新编译NodeJS扩展
在Windows系统上也一样可以使用electron-rebuild工具，但必须预先配置好编译环境。
首先，安装window编译工具：
1 | $ npm install --global --production windows-build-tools |
然后，下载并安装Python2，必须Python2不能Python3，如果同时安装了Python2和Python3，须给npm指定Python2可执行文件路径，避免调用了Python3：
1 | $ npm config set python /path/to/executable/python2 |
这样，才能在Windows系统上调用electron-rebuild。如果electron-rebuild执行过程中，遇上CONNECT ERROR可能是网络问题，可以换成淘宝源再试试。
所以尽量少用NodeJS扩展，可以免去跨平台时重新编译的麻烦。
应用打包
应用开发完成后，需要打包成dmg或exe等安装文件，可以使用electron-builder
electron-builder
electron-builder有很多配置选项，来调用各式各样的程序打包。这里只简单介绍一下MacOS系统安装程序和Windows系统NSIS安装程序的打包配置（NSIS是一个开源的 Windows 系统下安装程序制作工具）。
修改package.json，添加build配置：
1 | { |
然后，就可以打包Electron应用了：
1 | $ yarn react-scripts build // 先用webpack打包React应用到`build`目录下 |
当然，正式打包还需要代码签名，还有更多配置，请查看electron-builder配置说明。
