Electron是什麼

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

原理：

nodejs:

如果你不知道 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 自帶的多程序架構也一同被利用。這樣每個頁面都執行著一個獨立的程序,它們被統稱為 渲染程序

優缺點？

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

優點:

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

缺點:

效能肯定比不上原生的桌面應用，釋出的包貌似有一點點大。

OK,接下來開始.........................................................

一、快速建立react專案

首先安裝好GIT和nodejs,安裝好nodejs同時也安裝好了npm

這是使用Facebook開發的reate-react-app 來快速建立一個 react 專案（，命名為react-electron）。

# 安裝 create-react-app 命令,如果已將安裝請忽略
npm install -g create-react-app
# 建立 react專案
create-react-app react-electron
# 啟動專案( create-react-app 真的超級方便啊)
cd react-electron && npm start

npm start之後瀏覽器會自動開啟網址 http://localhost:3000/ ，出現react專案的頁面了

二、安裝Electron

#在react-electron專案目錄下
npm install -save electron

相關配置

react-electron 根目錄(不是 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, './build/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

#都在reatc-electron根目錄下執行
# 由於我們在main.js檔案裡使用了url訪問到react專案，所以在這裡需要先啟動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

四、打包electron

常用打包外掛

安裝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 /home/react-electron react-electron --all --out ~/ --electron-version 2.0.6" 
複製程式碼

打包完成後會在～/目錄下生成對應平臺的包，在上述命令的--out後面可見

開始打包

npm run-script package
複製程式碼

提醒

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

五、專案原始檔加密

可以看到，在每個包下的resources資料夾裡的app資料夾 就是我們寫的程式，這樣我們的程式碼就是暴露在使用者電腦上的，這非常的不安全，還好electron 自帶了加密功能。

首先安裝asar

#安裝asar實用程式
npm install -g asar

接下來在生成的應用的resources資料夾下執行下面命令：

asar pack ./app app.asar

執行完畢後在resources資料夾下可以看見生成的app.asar檔案，此時可以把resources目錄下的app資料夾刪除。

至此完成原始碼檔案的加密。

六、結束語

   因為工作的原因需要用到electron。通過一週時間的研究和學習，可以得出electron確實是一個跨平臺開發應用的利器，通過web開發就能實現wirte once, run every where的理念。很棒。

      最後提一下自己遇到的坑以及一些總結：

1. 在electron裡面可以呼叫nodejs幾乎所有的功能，當然前提是需要require nodejs的包；
2. 在react的js頁面或者公司專案用到的Ant Design的一些js頁面需要用到electron時候，通過官方的

   const electron = require('electron')

   語句並不能成功引入，此時需要通過

   const electron = window.require('electron')

   引入；

3. 還有，最最最重要的一點！！！！開發時候一般都是在main中通過react專案的URL去熱除錯應用，BUT！！此時請在electron生成的視窗中進行除錯！！如果只在瀏覽器的頁面檢視效果，會提示electron的模組無法匯入，無論你用啥方法！

4. 最後，再提一點自己的感觸。使用nodejs的fs包和electron的dialog、app類能夠首先呼叫不同平臺的檔案選擇器和一些特殊資料夾的的功能，比如說桌面、使用者預設資料資料夾的修改。這裡不多作描述了。～～

本文部分引入此篇部落格的觀點，謝謝作者的慷慨總結！！