Electron结合React使用

React Electron

1. 一种是自己重新基于 create-react-app脚手架弄一个，可能对于前端开发者而言这种更加熟悉一点。
2. 一种是使用github上的现成模板

这里着重第一种说明下，第二种在github上有现成的工程模板clone下来直接运行即可。最后也会看一下第二种

创建 react 工程

使用 create-react-app脚手架创建 react 工程

npx create-react-app my-app

安装 electron

本地项目安装electron 依赖

npm i electron --save

修改工程

修改package.json文件

1. 在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字段并设置为"."后，静态文件的路径就变成了相对路径，就可以正确地找到了。

2. 添加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 框架结合在一起了，下面

1. 打开一个终端命令行输入 npm run start 启动react。(默认是在 http://localhost:3000/)
2. 再打开一个命令行输入 npm run electron-dev 启动electron应用，这时候electron应用就会加载 http://localhost:3000/ 并且在代码中修改也会热更新到electron应用中的主窗体
3. 如果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下来之后运行会看到页面配置了一个简单的路由和一个计数器
效果如下: