前端開發框架之Electron的(of)認識
Electron是(yes)由Github開發，用(use)HTML，CSS和(and)JavaScript來(Come)構建跨平台桌面應用(use)程序的(of)一(one)個(indivual)開源庫。Electron通過将Chromium和(and)Node.js合并到(arrive)同一(one)個(indivual)運行時(hour)環境中，并将其打包爲(for)Mac，Windows和(and)Linux系統下的(of)應用(use)來(Come)實現這(this)一(one)目的(of)。
爲(for)了(Got it)保持Electron的(of)小巧 (文件體積) 和(and)可持續性開發 (以(by)防依賴庫和(and)API的(of)泛濫) ，Electron限制了(Got it)所使用(use)的(of)核心項目的(of)數量。比如Electron隻用(use)了(Got it)Chromium的(of)渲染庫而不(No)是(yes)其全部組件。這(this)使得升級Chromium更加容易，但也意味着Electron缺少了(Got it)Google Chrome裏的(of)一(one)些浏覽器相關的(of)特性。添加到(arrive)Electron的(of)新功能應該主要(want)是(yes)原生(born) API。如果可以(by)的(of)話，一(one)個(indivual)功能應該盡可能的(of)成爲(for)一(one)個(indivual)Node.js模塊。
2.開發環境
可以(by)使用(use)原生(born)的(of)Node.js開發環境來(Come)開發Electron應用(use)。爲(for)了(Got it)打造一(one)個(indivual)Electron桌面程序的(of)開發環境，你隻需要(want)安裝好Node.js、npm、一(one)個(indivual)順手的(of)代碼編輯器以(by)及對你的(of)操作(do)系統命令行客戶端有基本了(Got it)解。我(I)們(them)以(by)比較常見的(of)windows開發環境（win7以(by)上(superior)）爲(for)例：
首先，安裝最新版本的(of)node.js。推薦安裝最新的(of)長期支持的(of)版本。在(exist)安裝過程中的(of)配置界面請勾選node.js runtime、npm package manager和(and)add to path這(this)三個(indivual)選項。可通過以(by)下命令來(Come)确認node和(and)npm已經安裝完成。
3.打造一(one)個(indivual)簡單的(of)Electron應用(use)
Electron 可以(by)讓你使用(use)純 JavaScript 調用(use)豐富的(of)原生(born)(操作(do)系統) APIs 來(Come)創造桌面應用(use)。你可以(by)把它看作(do)一(one)個(indivual) Node. js 的(of)變體，它專注于(At)桌面應用(use)而不(No)是(yes) Web 服務器端。這(this)不(No)意味着 Electron 是(yes)某個(indivual)圖形用(use)戶界面（GUI）庫的(of) JavaScript 版本。相反，Electron 使用(use) web 頁面作(do)爲(for)它的(of) GUI，所以(by)你能把它看作(do)成一(one)個(indivual)被 JavaScript 控制的(of)，精簡版的(of) Chromium 浏覽器。
從開發的(of)角度來(Come)看, Electron application 本質上(superior)是(yes)一(one)個(indivual) Node. js 應用(use)程序。與 Node.js 模塊相同，應用(use)的(of)入口是(yes) package.json 文件。一(one)個(indivual)最基本的(of) Electron 應用(use)一(one)般來(Come)說會有如下的(of)目錄結構：
your-app/
├── package.json
├── main.js
└── xw.html
爲(for)你的(of)新Electron應用(use)創建一(one)個(indivual)新的(of)空文件夾。打開你的(of)命令行工具，然後從該文件夾運行npm init
npm 會幫助你創建一(one)個(indivual)基本的(of) package.json 文件。其中的(of) main 字段所表示的(of)腳本爲(for)應用(use)的(of)啓動腳本，它将會在(exist)主進程中執行。如下片段是(yes)一(one)個(indivual) package.json 的(of)示例：
{
"name": "demo",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
注意：如果 main 字段沒有在(exist) package.json 中出(out)現，那麽 Electron 将會嘗試加載 index.js 文件（就像 Node.js 自身那樣）。如果你實際開發的(of)是(yes)一(one)個(indivual)簡單的(of) Node 應用(use)，那麽你需要(want)添加一(one)個(indivual) start 腳本來(Come)指引 node 去執行當前的(of) package,把這(this)個(indivual) Node 應用(use)轉換成一(one)個(indivual) Electron 應用(use)也是(yes)非常簡單的(of)，我(I)們(them)隻不(No)過是(yes)把 node 運行時(hour)替換成了(Got it) electron 運行時(hour)。
{
"name": "demo",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC"}
4.開發一(one)個(indivual)簡單的(of)electron
Electron apps 使用(use)JavaScript開發，其工作(do)原理和(and)方法與Node.js 開發相同。electron模塊包含了(Got it)Electron提供的(of)所有API和(and)功能，引入方法和(and)普通Node.js模塊一(one)樣。
electron 模塊所提供的(of)功能都是(yes)通過命名空間暴露出(out)來(Come)的(of)。比如說：electron.app負責管理Electron 應用(use)程序的(of)生(born)命周期， electron.BrowserWindow類負責創建窗口。下面是(yes)一(one)個(indivual)簡單的(of)main.js文件，它将在(exist)應用(use)程序準備就緒後打開一(one)個(indivual)窗口。
您應當在(exist) main.js 中創建窗口，并處理程序中可能遇到(arrive)的(of)所有系統事件。下面我(I)們(them)将完善上(superior)述例子，添加以(by)下功能：打開開發者工具、處理窗口關閉事件、在(exist)macOS用(use)戶點擊dock上(superior)圖标時(hour)重建窗口，添加後，main. js 就像下面這(this)樣：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 創建浏覽器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 并且爲(for)你的(of)應用(use)加載xw.html
win.loadFile('xw.html')
// 打開開發者工具
win.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 部分 API 在(exist) ready 事件觸發後才能使用(use)。
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// 在(exist) macOS 上(superior)，除非用(use)戶用(use) Cmd + Q 确定地(land)退出(out)，
// 否則絕大(big)部分應用(use)及其菜單欄會保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在(exist)macOS上(superior)，當單擊dock圖标并且沒有其他(he)窗口打開時(hour)，
// 通常在(exist)應用(use)程序中重新創建一(one)個(indivual)窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. 也可以(by)拆分成幾個(indivual)文件，然後用(use) require 導入。
5.啓動應用(use)
在(exist)創建并初始化完成 main.js、 xw.html和(and)package.json之後，您就可以(by)在(exist)當前工程的(of)根目錄執行 npm start 命令來(Come)啓動剛剛編寫好的(of)Electron程序了(Got it)。
推薦閱讀：
前端開發框架之Vue基礎
前端開發框架之Vue
前端開發之React開發框架的(of)介紹與使用(use)
