React + Electron 搭建一個桌面應用

當你衝這個標題點進來的時候，我猜你一定知道 React 是什麼，更多詳情請戳這裡，就不介紹React了，一個神般存在的前端框架。另外，瀏覽器和移動端橫行的時代，為什麼還需要桌面應用？我就不解釋了，反正優點很多，做為技術多學一點總沒錯。

Electron 簡單介紹

是什麼?

官網是這麼介紹的：

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

簡單翻譯一下就是：

​Electron 是一個由 GitHub 開發的開源庫，通過將 Chromium) 和Node.js 組合並使用 HTML，CSS 和 JavaScript 進行構建 Mac，Windows，和 Linux 跨平臺桌面應用程序。

隱藏意思：

讓前端開發者快樂簡單擁抱桌面應用！

原理是?

上面已將說了，Electron 通過將 Chromium 和 Node.js 組合到單個 runtime 中來實現的。

node.js:

如果你不知道 node.js，那還等什麼快戳這裡，看一看世界上最溫柔可愛的語言。它藉助於 Google 的 V8 引擎，Node.js

是一個能夠在服務器端運行 JavaScript 的開放源代碼、跨平臺 JavaScript 運行環境，更多解釋請戳維基百科。

Chromium:

Chromium 或許你沒聽說過，但是你一定聽說過 chrome 吧！Chromium 是 Google 的開源瀏覽器，是 chrome 背後的那個不太穩定更新快的兄弟版，詳情戳這裡。

組合:

Electron 創建的應用使用網頁作為其 GUI ,因此你可以將其當成由 JavaScript 控制的迷你精簡版Chromium 瀏覽器。也可以將 Electron 當成 node.js 變體，只不過它更專注於桌面應用而非 Web 服務器。在 Electron 中, 把 package.json 中設定的 main 腳本的所在進程稱為 主進程。這個進程中運行的腳本也可通過創建網頁這種方式來展現其 GUI。 因為 Electron 是通過 Chromium 來顯示頁面,所以 Chromium 自帶的多進程架構也一同被利用。這樣每個頁面都運行著一個獨立的進程,它們被統稱為 渲染進程。通常來說,瀏覽器中的網頁會被限制在沙盒環境中運行並且不允許訪問系統原生資源。但是由於 Eelectron 用戶可在頁面中調用 Node.js API，所以可以和底層操作系統直接交互。

優缺點？

總之，優點肯定大於缺點。

優點:

方便快捷的開發桌面應用，跨平臺，對前端開發者友好，活躍的社區，豐富的api......

缺點:

性能肯定比不上原生的桌面應用，發佈的包貌似有一點點大。

怎麼開始?

如果不是假前端，那麼你電腦肯定安裝好了 git 和 node。

# github上有一個 electron-quick-start 倉庫克隆下來
git clone https://github.com/electron/electron-quick-start
# 進入文件夾
cd electron-quick-start
# 安裝依賴包並運行
npm install && npm start
複製代碼

然後，你桌面應用就創建成功瞭如下圖所示！

打開你的 electron-quick-start 文件夾，你的項目結構如下圖：

其中，main.js 是你的啟動文件，index.html 是你的入口文件。

React 結合 Electron

上面簡單的介紹了一下 Electron，下面介紹一下如何將 React 和 Electron 結合起來。

創建一個React項目

首先你得有一個 React 項目，由於太多繁瑣的配置和懶惰的自己，我們這裡就用 Facebook 提供的 create-react-app 來快速創建一個 knownsec-fed 項目。

# 安裝 create-react-app 命令,如果已將安裝請忽略
npm install -g create-react-app
# 創建 knownsec-fed 項目
create-react-app knownsec-fed
# 啟動項目( create-react-app 真的超級方便啊)
cd knownsec-fed && npm start
複製代碼

於是，瀏覽器 http://localhost:3000/ 就會出現著如下圖界面，一個 react 項目創建成功：

添加 Electron 包

# 在knownsec-fed 目錄下安裝 Electron 包
npm install -save electron
複製代碼

相關配置

配置 main.js

knownsec-fed 根目錄(不是 src 目錄)下面新建 main.js 文件,這個文件和 electron-quick-start 中的官方默認 main.js 幾乎一模一樣，只修改了加載應用這入口這一個地方：

// 引入electron並創建一個Browserwindow
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// 保持window對象的全局引用,避免JavaScript對象被垃圾回收時,窗口被自動關閉.
let mainWindow
function createWindow () {
//創建瀏覽器窗口,寬高自定義具體大小你開心就好
mainWindow = new BrowserWindow({width: 800, height: 600})
 /* 
 * 加載應用----- electron-quick-start中默認的加載入口
 mainWindow.loadURL(url.format({
 pathname: path.join(__dirname, 'index.html'),
 protocol: 'file:',
 slashes: true
 }))
 */
 // 加載應用----適用於 react 項目
 mainWindow.loadURL('http://localhost:3000/'); 

 
 // 打開開發者工具，默認不打開
 // mainWindow.webContents.openDevTools()
 // 關閉window時觸發下列事件.
 mainWindow.on('closed', function () {
 mainWindow = null
 })
}
// 當 Electron 完成初始化並準備創建瀏覽器窗口時調用此方法
app.on('ready', createWindow)
// 所有窗口關閉時退出應用.
app.on('window-all-closed', function () {
 // macOS中除非用戶按下 `Cmd + Q` 顯式退出,否則應用與菜單欄始終處於活動狀態.
 if (process.platform !== 'darwin') {
 app.quit()
 }
})
app.on('activate', function () {
 // macOS中點擊Dock圖標時沒有已打開的其餘應用窗口時,則通常在應用中重建一個窗口
 if (mainWindow === null) {
 createWindow()
 }
})
// 你可以在這個腳本中續寫或者使用require引入獨立的js文件. 
複製代碼

配置 package.json

{
 "name": "knownsec-fed",
 "version": "0.1.0",
 "private": true,
 "main": "main.js", // 配置啟動文件
 "homepage":".", // 
 "dependencies": { 

 "electron": "^1.7.10",
 "react": "^16.2.0",
 "react-dom": "^16.2.0",
 "react-scripts": "1.1.0"
 },
 "scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject",
 "electron-start": "electron ." // 配置electron的start，區別於web端的start
 }
} 
複製代碼

啟動 Electron

# 啟動react項目
npm start
# 啟動electron
npm run electron-start
複製代碼

支持熱調試，當你修改代碼後，桌面應用也將會重新更新。

打包

打包 react 項目

首先修改 main.js, 因為現在你要將 react 項目打包在 build 文件夾下面，所以加載應用處改成如下！當然也可在某個配置文件裡面配置是否屬於開發，此處用if判斷一下從未進行選擇執行哪段加載應用代碼。但是這裡為了簡便，暫且使用直接修改的方式：

// 加載應用----react 打包
mainWindow.loadURL(url.format({
 pathname: path.join(__dirname, './build/index.html'),
 protocol: 'file:',
 slashes: true
}))
// 加載應用----適用於 react 開發時項目
// mainWindow.loadURL('http://localhost:3000/');
複製代碼

默認情況下，homepage 是 http://localhost:3000，build 後，所有資源文件路徑都是 /static，而 Electron 調用的入口是 file :協議，/static 就會定位到根目錄去，所以找不到靜態文件。在 package.json 文件中添加 homepage 字段並設置為"."後，靜態文件的路徑就變成了相對路徑，就能正確地找到了添加如下配置：

"homepage":"."
複製代碼

然後就開始打包 react：

npm run-script build
複製代碼

此時，根目錄下面將多出一個build文件夾。

打包 electron

常用打包插件

• electron-builder
• electron-packager

安裝electron-packager

# knownsec-fed目錄下安裝electron-packager包
npm install electron-packager --save-dev
# 安裝electron-packager命令
npm install electron-packager -g
複製代碼

electron-packager命令介紹

 electron-packager <location> <name> <platform> <architecture> <electron> <optional>
複製代碼
/<optional>/<electron>/<architecture>/<platform>/<name>/<location>

• location of project: 項目的本地地址，此處我這邊是 ~/knownsec-fed
• location of project: 項目名稱，此處是 knownsec-fed
• platform: 打包成的平臺
• architecture: 使用 x86 還是 x64 還是兩個架構都用
• electron version: electron 的版本

於是，根據我這邊的情況在 package.json 文件的在>

"package": "electron-packager ~/knownsec-fed/build knownsec-fed --all --out ~/ --version 1.7.10 
複製代碼

開始打包

npm run-script package
複製代碼

提醒

由於打包的時候會把瀏覽器內核完整打包進去，所以就算你的項目開發就幾百k的資源，但最終的打包文件估計也會比較大。

其它

此文章未涉及 Electron 具體的技術，只是簡單的介紹了一下 react + electron 的一個配置及打包的流程。或許以後會寫關於 Electron 的技術細節。Electron 有著非常強大的 api，其背後涉及的技術也非常多。