開發 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({
    width: 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 完成品，這不過是萬里長征的第一步罷了。