開發乙個React Electron應用

最近用react + electron開發了乙個rss閱讀器，開源在：github.com/breeze2/bre…，這裡記錄一下大致的開發過程。

以普通的react應用做基礎，一步步初始化專案。預先安裝yarn工具，用yarn來建立乙個react應用專案，假設名字叫demo，再引入electron依賴。

$ cd /path/to/projects $ 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配置：

複製**

public/electron.js**：

const path = require('path')

let mainwindow

function

createwindow() )

mainwindow.loadfile('index.html')

mainwindow.webcontents.opendevtools()

mainwindow.on('closed', function () )

} if (process.platform !== 'darwin')

}) if (mainwindow === null)

})複製**

在執行執行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)  else 
...複製**

然後，在專案目錄下，開啟兩個終端，乙個執行yarn react-scripts start，乙個執行yarn electron ./，就可以開發除錯react + electron應用了。不用羨慕electron-vue，可以一句命令可以直接啟動，其實原理是一樣的。要實現一句命令啟動也不難，只要把兩句命令合到一起執行就可以了。先安裝工具庫：

$ yarn add concurrently --dev $ yarn add wait-on --dev

複製**

修改package.json，新增乙個electron-dev指令碼命令：


...}複製**

這樣，執行一句yarn electron-dev就可以啟動react + electron應用了。

一般來說，瀏覽器提供一種js執行時，nodejs提供另一種js執行時，electron則是將這兩種執行時結合到一起來提供。不過，這兩種執行時並不是完美地和睦相處，比如說使用webpack時，通過webpack打包的js**中，不能直接通過import關鍵字或者require函式來引入nodejs提供的功能介面，因為webpack覆蓋了nodejs自帶的require函式。不過electron中，window物件的require屬性會對映到nodejs自帶的require函式上，比如要呼叫nodejs提供的http介面，可以這樣寫：

複製**通常，純js**實現的工具庫都可以在electron環境中執行。不過有些nodejs的工具庫並不是純js**實現的，比如node-sqlite3。node-sqlite3是c++編寫，算是nodejs的擴充套件，而不是單純的工具庫。node-sqlite3需要針對electron環境重新編譯，才能在electron環境中執行。

electron-rebuild是專門electron環境針對重新編譯nodejs擴充套件的乙個工具。在專案目錄下，安裝electron-rebuild：

$ yarn add electron-rebuild --dev

複製**

比如，重新編譯node-sqlite3，只需要：

$ yarn electron-rebuild -f -w sqlite3

複製**

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

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

首先，安裝window編譯工具：

$ npm install --global --production windows-build-tools $ npm config set msvs_version 2017

複製**

$ npm config set python /path/to/executable/python2

複製**

這樣，才能在windows系統上呼叫electron-rebuild。如果electron-rebuild執行過程中，遇上connect error可能是網路問題，可以換成**源再試試。

所以盡量少用nodejs擴充套件，可以免去跨平台時重新編譯的麻煩。

應用開發完成後，需要打包成dmg或exe等安裝檔案，可以使用electron-builder

electron-builder有很多配置選項，來呼叫各式各樣的程式打包。這裡只簡單介紹一下macos系統安裝程式和windows系統nsis安裝程式的打包配置（nsis是乙個開源的 windows 系統下安裝程式製作工具）。

修改package.json，新增build配置：

,
"win": ,
"nsis": ,
"files": [
"build/**/*" // 引入的檔案
]}  ...
}複製**

然後，就可以打包electron應用了：

$ yarn react-scripts build // 先用webpack打包react應用到`build`目錄下 $ yarn eletron-builder // 再用eletron-builder打包electron應用

複製**

當然，正式打包還需要**簽名，還有更多配置，請檢視electron-builder配置說明。

開發乙個React Electron應用

開發乙個爬蟲 PHP

開發乙個模組小結

使用vue開發乙個專案（一）

開發乙個React Electron應用

開發乙個爬蟲 PHP

開發乙個模組小結

使用vue開發乙個專案（一）

相關推薦