Electron结合React使用

Love The Way You Lie 2023-05-28 12:44 208阅读 0赞

# 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][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文件

开发模式下热模块跟新效果如下:  
![在这里插入图片描述][20200326105722403.gif]  
可以看到在代码中做的修改可以实时的热更新到electron 应用中去。  
如果react打包之后，可以使用 npm run electron来加载react打包之后的应用。效果如下：  
![在这里插入图片描述][20200326110322791.gif]

## electron-react-boilerplate ##

这个是已近配置好的一个工程模板，可以基于此模板来使用。需要注意的是使用这个模板node版本需要>10  
地址：[https://github.com/electron-react-boilerplate/electron-react-boilerplate][https_github.com_electron-react-boilerplate_electron-react-boilerplate]  
clone下来之后运行会看到页面配置了一个简单的路由和一个计数器  
效果如下:  
![在这里插入图片描述][20200326111824227.gif]

[https_github.com_electron_electron-quick-start]: https://github.com/electron/electron-quick-start
[20200326105722403.gif]: /images/20230528/ebcfe2495c6d404c9dc6ab35659a0650.png
[20200326110322791.gif]: /images/20230528/41759c579e044d2596fb563b2e07ceab.png
[https_github.com_electron-react-boilerplate_electron-react-boilerplate]: https://github.com/electron-react-boilerplate/electron-react-boilerplate
[20200326111824227.gif]: /images/20230528/4bf3b3006438430cad2568de52514f13.png