開發一個React + Electron應用

最近用React + Electron開發了一個RSS閱讀器，開源在：github.com/breeze2/bre…，這裏記錄一下大體的開發過程。

初始化

建立項目

以普通的React應用作基礎，一步步初始化項目。預先安裝yarn工具，用yarn來建立一個React應用項目，假設名字叫demo，再引入Electron依賴。

$ cd /PATH/TO/PROJECTS
$ yarn create react-app YOUR_APP_NAME
$ cd /PATH/TO/PROJECTS/YOUR_APP_NAME
$ yarn add electron --dev
複製代碼

配置入口文件

建立項目後，大體的目錄結構以下：

|-->demo
    |-->node_modules
        |--...
    |-->public
        |--index.html
        |--...
    |-->src
    |--package.json
    |--...
複製代碼

通常來講，React應用（測試環境下）的入口文件就是public/index.html，而Electron應用的入口文件最好也放在public目錄下，並命名爲electron.js（這樣electron-builder能夠自動識別）。

先在package.json中lectron應用的入口文件，添加main配置：

{
  ...
  "main": "public/electron.js",
  ...
}
複製代碼

public/electron.js代碼：

const { app, BrowserWindow } = require('electron')
const path = require('path')

let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 960,
        height: 600,
    })
    mainWindow.loadFile('index.html')
    mainWindow.webContents.openDevTools()
    mainWindow.on('closed', function () {
        mainWindow = null
    })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow()
    }
})
複製代碼

在執行執行yarn electron ./命令就能夠啓動Electron應用了，不過React應用還沒啓動起來。

啓動應用

通常用yarn react-scripts start命令，就能夠將React應用掛載在本地3000端口上（ http://localhost:3000 ），用於開發調試。要用React結合Electron一塊兒開發調試，先安裝electron-is-dev來識別當前是否開發環境。

$ yarn add electron-is-dev
複製代碼

通常開發環境是加載http://localhost:3000/，正式環境是加載../build/index.html文件，因此修改public/electron.js代碼（createWindow函數內）：

const isDev = require('electron-is-dev')

...
--    // mainWindow.loadFile('index.html')
++    if (isDev) {
++        mainWindow.loadURL('http://localhost:3000/')
++    } else {
++        mainWindow.loadFile(path.join(__dirname, '/../build/index.html'))
++    }
...
複製代碼

而後，在項目目錄下，打開兩個終端，一個執行yarn react-scripts start，一個執行yarn electron ./，就能夠開發調試React + Electron應用了。 不用羨慕electron-vue，能夠一句命令能夠直接啓動，其實原理是同樣的。 要實現一句命令啓動也不難，只要把兩句命令合到一塊兒執行就能夠了。先安裝工具庫：

$ yarn add concurrently --dev
$ yarn add wait-on --dev
複製代碼

修改package.json，添加一個electron-dev腳本命令：

{
  ...
  "scripts": {
    ...
    "electron-dev": "concurrently \"BROWSER=none react-scripts start\" \"wait-on http://localhost:3000 && electron .\"",
    ...
  }
  ...
}
複製代碼

這樣，執行一句yarn electron-dev就能夠啓動React + Electron應用了。

JS運行時

通常來講，瀏覽器提供一種JS運行時，NodeJS提供另外一種JS運行時，Electron則是將這兩種運行時結合到一塊兒來提供。不過，這兩種運行時並非完美地和氣相處，好比說使用webpack時，經過webpack打包的JS代碼中，不能直接經過import關鍵字或者require函數來引入NodeJS提供的功能接口，由於webpack覆蓋了NodeJS自帶的require函數。 不過Electron中，window對象的require屬性會映射到NodeJS自帶的require函數上，好比要調用NodeJS提供的http接口，能夠這樣寫：

const http = window.require('http')
複製代碼

從新編譯NodeJS擴展

一般，純JS代碼實現的工具庫均可以在Electron環境中運行。不過有些NodeJS的工具庫並非純JS代碼實現的，好比node-sqlite3。node-sqlite3是C++編寫，算是NodeJS的擴展，而不是單純的工具庫。node-sqlite3須要針對Electron環境從新編譯，才能在Electron環境中運行。

electron-rebuild

electron-rebuild是專門Electron環境針對從新編譯NodeJS擴展的一個工具。 在項目目錄下，安裝electron-rebuild：

$ yarn add electron-rebuild --dev
複製代碼

好比，從新編譯node-sqlite3，只須要：

$ yarn electron-rebuild -f -w sqlite3
複製代碼

在MacOS系統上就是這麼簡單，在Windows系統就複雜一些。

Windows系統上從新編譯NodeJS擴展

在Windows系統上也同樣可使用electron-rebuild工具，但必須預先配置好編譯環境。

首先，安裝window編譯工具：

$ npm install --global --production windows-build-tools
$ npm config set msvs_version 2017
複製代碼

而後，下載並安裝Python2，必須Python2不能Python3，若是同時安裝了Python2和Python3，須給npm指定Python2可執行文件路徑，避免調用了Python3：

$ npm config set python /path/to/executable/python2
複製代碼

這樣，才能在Windows系統上調用electron-rebuild。若是electron-rebuild執行過程當中，趕上CONNECT ERROR多是網絡問題，能夠換成淘寶源再試試。

因此儘可能少用NodeJS擴展，能夠免去跨平臺時從新編譯的麻煩。

應用打包

應用開發完成後，須要打包成dmg或exe等安裝文件，可使用electron-builder

electron-builder

electron-builder有不少配置選項，來調用各式各樣的程序打包。這裏只簡單介紹一下MacOS系統安裝程序和Windows系統NSIS安裝程序的打包配置（NSIS是一個開源的 Windows 系統下安裝程序製做工具）。

修改package.json，添加build配置：

{
  ...
  "homepage": "./", // 由於最後React應用引用的JS、CSS等資源都是本地的，只要用當前的相對路徑便可
  "build": {
    "appId": "com.xxx.app", // 應用ID
    "npmRebuild": true, // 打包前是否從新編譯NodeJS擴展
    "mac": {
      "category": "news", // 應用分類
      "icon": "build/icon.png" // 應用icon路徑
    },
    "win": {
      "icon": "build/icon.png", // 應用icon路徑
      "target": "nsis" // Windows安裝文件的目標類型
    },
    "nsis": {
      "allowToChangeInstallationDirectory": true, // 是否容許修改安裝路徑
      "allowElevation": false, // 是否容許提高權限
      "createDesktopShortcut": true, // 是否建立桌面快捷方式
      "menuCategory": true, //是否在菜單欄建立分類
      "oneClick": false // 是否一鍵安裝
    },
    "files": [
      "build/**/*" // 引入的文件
    ]
  }
  ...
}
複製代碼

而後，就能夠打包Electron應用了：

$ yarn react-scripts build // 先用webpack打包React應用到`build`目錄下
$ yarn eletron-builder // 再用eletron-builder打包Electron應用
複製代碼

固然，正式打包還須要代碼簽名，還有更多配置，請查看electron-builder配置說明。

參考

• From React to an Electron app ready for production