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 of project> <name of project> <platform> <architecture> <electron version> <optional options>
複製代碼

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

因而，根據我這邊的狀況在 package.json 文件的在 scripts 中加上以下代碼：

"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，其背後涉及的技術也很是多。

友情連接

• Electron github

• Electron 英文文檔

• Electron 中文手冊

• electron-packager github

• 基於Electron構建的app

• electron-react-boilerplate github

---

關注微信公衆號：創宇前端（KnownsecFED），碼上獲取更多優質乾貨！