开发 React Electron App 的第一步

在此记录一下如何用 React + Electron 开发一个最基本的桌面程序。

看似简单，其实过程中是有不少坑的，不是几句 npm install 就能搞定的。

本文以 Windows 为运行环境。

Create React App

创建 React 项目还是用最方便的 cli 工具 create-react-app:

npx create-react-app react-electron-app

Add Electron

接下来除了添加 electron 本体，有几个包也可算是必备的，一并添加：

yarn add electron electron-builder --dev
yarn add electron-is-dev

注意，electron 和 electron-builder 需要放在 "devDependencies" 中，否则以后无法打包。

启动开发

在开始开发前，必须要先配置一下 package.json, 让 react 和 electron 都能运行起来进行开发。

首先加入 electron 的入口脚本：

"main": "./public/electron.js"

将入口文件 electron.js 放在 react 的 public 文件夹下，public 文件夹会在 React 进行 build 后被复制到 build 文件夹中。

接着，对 "scripts" 进行修改：

"scripts": {
  "start": "set BROWSER=none && react-scripts start",
  "electron": "electron .",
  "postinstall": "electron-builder install-app-deps"
}

"start" 脚本修改后，react 进行开发时，就不会打开浏览器了。"postinstall" 确保其他依赖始终符合当前 electron 的版本。

接下来要创建入口文件 electron.js , 使程序运行起来。

Electron Entry

创建 electron.js 并进行最基本的设置：

const { app, BrowserWindow } = require('electron');
const path = require('path');
const isDev = require('electron-is-dev');

let mainWindow;

const createWindow = () => {
  // 创建程序窗口，有关选项可参考：[[Electron Documentation](https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions)](https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions)
  mainWindow = new BrowserWindow({
     800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  // isDev 判断是开发模式还是产品模式，开发模式读取本地服务器，非开发模式读取 React 生成文件的 index.html 文件。
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
  mainWindow.on('closed', () => mainWindow = null);
};

app.whenReady().then(() => {
  createWindow();
});

preload 是程序启动前的预加载文件，我们可以在 preload.js 中执行一些自己的加载脚本。建议在其中设定渲染进程和主进程之间的通信 API.

接下来，先运行 yarn run start 启动 React，再运行 yarn run electron, 即可打开 electron 的程序进行开发调试。

Build

之前是开发模式，当开发完成后，我们希望有像模像样的应用程序可执行文件时，就得执行以下步骤。

首先，我们要为 React 程序在 package.json 添加 homepage 配置，以避免 React 程序误用绝对路径而报错：

 "homepage": "./"

接着，我们将 React 程序 build 出来：

yarn run build

这里特别注意，当 React build 之后，"dependencies" 中 React 的相关依赖就不会在 build 中起作用了，因为他们已经被 webpack 打包压缩了。而 Electron build 时，还会打包这些不会用到的 React 相关依赖，这会使 app 体积变得很大，我们要做的就是把这些依赖移到 "devDependencies" 中去：

"dependencies": {
  "electron-is-dev": "^2.0.0"
  },
"devDependencies": {
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
  "electron": "^12.0.2",
  "electron-builder": "^22.10.5",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-scripts": "4.0.3",
  "web-vitals": "^1.0.1"
},

electron-is-dev 由于在 electron.js 中要 require 到，所以不要动。

接下里在此修改 package.json, 将打包脚本加进去：

"scripts": {
  "electron-pack": "electron-builder --dir",
  "electron-dist": "electron-builder",
}

其中，electron-pack 打包生成的是不需要安装可直接执行的程序，electron-dist 是生成安装包。

现在我们 build 的话，程序会以 package.json 中的 name 来命名，如要自定义，可在 package.json 中添加：

"build": {
  "productName": "ReactElectronApp"
}

好了，万事具备，现在可以打包了——然后进入 dist 文件夹看看吧。

当然，距离真正的 app 完成品，这不过是万里长征的第一步罢了。