Electron是什么

?Electron 是一個(gè)由 GitHub 開發(fā)的開源庫,，通過將 Chromium) 和Node.js 組合并使用 HTML，CSS 和 JavaScript 進(jìn)行構(gòu)建 Mac,，Windows,，和 Linux 跨平臺桌面應(yīng)用程序。

原理：

上面已將說了,，Electron 通過將 Chromium 和 Node.js 組合到單個(gè) runtime 中來實(shí)現(xiàn)的.

nodejs:

如果你不知道 node.js,，那還等什么快戳這里，看一看世界上最溫柔可愛的語言,。它借助于 Google 的 V8 引擎,，Node.js 是一個(gè)能夠在服務(wù)器端運(yùn)行 JavaScript 的開放源代碼,、跨平臺 JavaScript 運(yùn)行環(huán)境，更多解釋請戳維基百科,。

Chromium:

Chromium 或許你沒聽說過,，但是你一定聽說過 chrome 吧！Chromium 是 Google 的開源瀏覽器,，是 chrome 背后的那個(gè)不太穩(wěn)定更新快的兄弟版,，詳情戳這里。

組合:

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

優(yōu)缺點(diǎn),？

總之，優(yōu)點(diǎn)肯定大于缺點(diǎn),。

優(yōu)點(diǎn):

方便快捷的開發(fā)桌面應(yīng)用,，跨平臺，對前端開發(fā)者友好,，活躍的社區(qū),，豐富的api......

缺點(diǎn):

性能肯定比不上原生的桌面應(yīng)用，發(fā)布的包貌似有一點(diǎn)點(diǎn)大,。

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

一、快速創(chuàng)建react項(xiàng)目

首先安裝好GIT和nodejs,安裝好nodejs同時(shí)也安裝好了npm

這是使用Facebook開發(fā)的reate-react-app 來快速創(chuàng)建一個(gè) react 項(xiàng)目（,，命名為react-electron）,。

# 安裝 create-react-app 命令,如果已將安裝請忽略
npm install -g create-react-app
# 創(chuàng)建 react項(xiàng)目
create-react-app react-electron
# 啟動(dòng)項(xiàng)目( create-react-app 真的超級方便啊)
cd react-electron && npm start

npm start之后瀏覽器會自動(dòng)打開網(wǎng)址 http://localhost:3000/ ，出現(xiàn)react項(xiàng)目的頁面了

二,、安裝Electron

#在react-electron項(xiàng)目目錄下
npm install -save electron

相關(guān)配置

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

// 引入electron并創(chuàng)建一個(gè)Browserwindow
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// 保持window對象的全局引用,避免JavaScript對象被垃圾回收時(shí),窗口被自動(dòng)關(guān)閉.
let mainWindow
function createWindow () {
//創(chuàng)建瀏覽器窗口,寬高自定義具體大小你開心就好
mainWindow = new BrowserWindow({width: 800, height: 600})
  /* 
   * 加載應(yīng)用-----  electron-quick-start中默認(rèn)的加載入口
    mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, './build/index.html'),
      protocol: 'file:',
      slashes: true
    }))
  */
  // 加載應(yīng)用----適用于 react 項(xiàng)目
  mainWindow.loadURL('http://localhost:3000/');
  // 打開開發(fā)者工具，默認(rèn)不打開
  // mainWindow.webContents.openDevTools()
  // 關(guān)閉window時(shí)觸發(fā)下列事件.
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
// 當(dāng) Electron 完成初始化并準(zhǔn)備創(chuàng)建瀏覽器窗口時(shí)調(diào)用此方法
app.on('ready', createWindow)
// 所有窗口關(guān)閉時(shí)退出應(yīng)用.
app.on('window-all-closed', function () {
  // macOS中除非用戶按下 `Cmd + Q` 顯式退出,否則應(yīng)用與菜單欄始終處于活動(dòng)狀態(tài).
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', function () {
   // macOS中點(diǎn)擊Dock圖標(biāo)時(shí)沒有已打開的其余應(yīng)用窗口時(shí),則通常在應(yīng)用中重建一個(gè)窗口
  if (mainWindow === null) {
    createWindow()
  }
})
// 你可以在這個(gè)腳本中續(xù)寫或者使用require引入獨(dú)立的js文件.   

配置 package.json

{
  "name": "knownsec-fed",
  "version": "0.1.0",
  "private": true,
  "main": "main.js", // 這里 配置啟動(dòng)文件
  "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,，區(qū)別于web端的start
  }
}   

啟動(dòng)Electron

#都在reatc-electron根目錄下執(zhí)行
# 由于我們在main.js文件里使用了url訪問到react項(xiàng)目,，所以在這里需要先啟動(dòng)react項(xiàng)目
npm start
# 啟動(dòng)electron
npm run electron-start

支持熱調(diào)試，當(dāng)你修改代碼后,，桌面應(yīng)用也將會重新更新,。

三,、打包react項(xiàng)目

首先修改main.js, 因?yàn)楝F(xiàn)在你要將 react 項(xiàng)目打包在 build 文件夾下面，所以加載應(yīng)用處改成如下,！當(dāng)然也可在某個(gè)配置文件里面配置是否屬于開發(fā),，此處用if判斷一下從未進(jìn)行選擇執(zhí)行哪段加載應(yīng)用代碼。但是這里為了簡便,，暫且使用直接修改的方式：

// 加載應(yīng)用----react 打包
mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, './build/index.html'),
  protocol: 'file:',
  slashes: true
}))
// 加載應(yīng)用----適用于 react 開發(fā)時(shí)項(xiàng)目
// mainWindow.loadURL('http://localhost:3000/');

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

"homepage":"."

然后就開始打包 react：

npm run-script 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: 項(xiàng)目的本地地址，此處我這邊是 ~/knownsec-fed
• location of project: 項(xiàng)目名稱,，此處是 knownsec-fed
• platform: 打包成的平臺
• architecture: 使用 x86 還是 x64 還是兩個(gè)架構(gòu)都用
• electron version: electron 的版本

于是,，根據(jù)我這邊的情況在 package.json 文件的在 scripts 中加上如下代碼：

"package": "electron-packager /home/react-electron react-electron --all --out ~/ --electron-version 2.0.6" 
復(fù)制代碼

打包完成后會在～/目錄下生成對應(yīng)平臺的包，在上述命令的--out后面可見

開始打包

npm run-script package
復(fù)制代碼

提醒

由于打包的時(shí)候會把瀏覽器內(nèi)核完整打包進(jìn)去,，所以就算你的項(xiàng)目開發(fā)就幾百k的資源,，但最終的打包文件估計(jì)也會比較大。

五,、項(xiàng)目源文件加密

可以看到,，在每個(gè)包下的resources文件夾里的app文件夾 就是我們寫的程序，這樣我們的代碼就是暴露在用戶電腦上的,，這非常的不安全,，還好electron 自帶了加密功能。

首先安裝asar

#安裝asar實(shí)用程序
npm install -g asar

接下來在生成的應(yīng)用的resources文件夾下執(zhí)行下面命令：

asar pack ./app app.asar

執(zhí)行完畢后在resources文件夾下可以看見生成的app.asar文件,，此時(shí)可以把resources目錄下的app文件夾刪除,。

至此完成源代碼文件的加密。

六,、結(jié)束語

   因?yàn)楣ぷ鞯脑蛐枰玫絜lectron,。通過一周時(shí)間的研究和學(xué)習(xí)，可以得出electron確實(shí)是一個(gè)跨平臺開發(fā)應(yīng)用的利器,，通過web開發(fā)就能實(shí)現(xiàn)wirte once, run every where的理念,。很棒。

      最后提一下自己遇到的坑以及一些總結(jié)：

1. 在electron里面可以調(diào)用nodejs幾乎所有的功能,，當(dāng)然前提是需要require nodejs的包,；
2. 在react的js頁面或者公司項(xiàng)目用到的Ant Design的一些js頁面需要用到electron時(shí)候,，通過官方的

   const electron = require('electron')

   語句并不能成功引入，此時(shí)需要通過

   const electron = window.require('electron')

   引入,；

3. 還有,，最最最重要的一點(diǎn)！?。,。?/span>開發(fā)時(shí)候一般都是在main中通過react項(xiàng)目的URL去熱調(diào)試應(yīng)用,，BUT?。?/span>此時(shí)請?jiān)趀lectron生成的窗口中進(jìn)行調(diào)試??！如果只在瀏覽器的頁面查看效果，會提示electron的模塊無法導(dǎo)入,，無論你用啥方法,！

4. 最后，再提一點(diǎn)自己的感觸,。使用nodejs的fs包和electron的dialog,、app類能夠首先調(diào)用不同平臺的文件選擇器和一些特殊文件夾的的功能，比如說桌面,、用戶默認(rèn)數(shù)據(jù)文件夾的修改,。這里不多作描述了?！?/strong>