React Electron
- 一种是自己重新基于 create-react-app脚手架弄一个，可能对于前端开发者而言这种更加熟悉一点。
- 一种是使用github上的现成模板
这里着重第一种说明下，第二种在github上有现成的工程模板clone下来直接运行即可。最后也会看一下第二种
创建 react 工程
使用 create-react-app脚手架创建 react 工程
npx create-react-app my-app
安装 electron
本地项目安装electron 依赖
npm i electron --save
修改工程
修改package.json文件
-
在package.json 中添加 homepage和main字段
"main": "main.js", "homepage": ".",main字段对应的main.js 是需要添加的electron 主进程的文件
homepage 原因是默认情况下，homepage是http://localhost:3000，build后，所有资源文件路径都是/static，而Electron调用的入口是file:协议，/static就会定位到根目录去，所以找不到静态文件。在package.json文件中添加homepage字段并设置为"."后，静态文件的路径就变成了相对路径，就可以正确地找到了。 -
添加script脚本命令
"electron-dev": "electron . dev", "electron": "electron .",这里一个是使用electron运行开发时候的脚本加了 dev的参数，后面会根据传入的这个参数，在主进程中做一层判断
如果是开发环境的话，那么主进程loadURL就会加载 http://localhost:3000/地址
如果是打包之后的环境就会加载打包文件夹的地址（这里打包是放在build文件夹下，所以会加载’./build/index.html’地址）
添加main.js文件
需要在工程目录下添加main.js文件，即electron的主进程文件，这里可以直接从github上的quick-start项目下直接copy过来做修改，地址是(https://github.com/electron/electron-quick-start)。
里面做的事情，就是新建一个窗体应用，在electron应用启动之后根据(开发/生产)环境去加载页面。
主要的修改如下：
// 引入node的 path 和url模块
const path = require('path')
const url = require('url');
// 获取在 package.json 中的命令脚本传入的参数，来判断是开发还是生产环境
const mode = process.argv[2];
在createWindow函数中，创建了主窗体之后根据参数去加载不同的url到electron中：
//判断是否是开发模式
if(mode === 'dev') {
mainWindow.loadURL("http://localhost:3000/")
} else {
mainWindow.loadURL(url.format({
pathname:path.join(__dirname, './build/index.html'),
protocol:'file:',
slashes:true
}))
}
当然如果这里开发环境下启动的不是3000端口，那这里也需要对应修改一下
添加 preload.js 文件
也是将quick-start工程中直接将这个文件copy过来即可
结合UI 框架
在这里其实就当做和正常的web应用开发一样，只不过这里使用了electron包装了一层，使得浏览器被包装进了electron中。正常web开发中怎么使用antd，这里也是一样使用。这里简单用 antd 演示一下
使用 npm i antd --save，然后在需要的地方引入对应的ui控件即可
热模块更新
到这里之后基本就将electron 和 react 框架结合在一起了，下面
- 打开一个终端命令行输入 npm run start 启动react。(默认是在 http://localhost:3000/)
- 再打开一个命令行输入 npm run electron-dev 启动electron应用，这时候electron应用就会加载 http://localhost:3000/ 并且在代码中修改也会热更新到electron应用中的主窗体
- 如果react打包之后，可以运行 npm run electron 这个时候electron 加载的就是 build/index.html文件
开发模式下热模块跟新效果如下:
可以看到在代码中做的修改可以实时的热更新到electron 应用中去。
如果react打包之后，可以使用 npm run electron来加载react打包之后的应用。效果如下：
electron-react-boilerplate
这个是已近配置好的一个工程模板，可以基于此模板来使用。需要注意的是使用这个模板node版本需要>10
地址：https://github.com/electron-react-boilerplate/electron-react-boilerplate
clone下来之后运行会看到页面配置了一个简单的路由和一个计数器
效果如下:
