前端技術在最近幾年迅猛發展，在任何開發領域我們都能看到前端的身影，從PC端到手機端，從APP到小程序，似乎前端已經無所不能，這就要求我們需要不斷地去學習來提升自己！前段時間尤大通過直播介紹了一下Vue3.0開發的心路歷程並放話今年發布，Deno v1.0 的發布，揚言要干掉Node，摸了摸日漸稀疏的頭發，表示真心學不動了，但摸了摸干癟但口袋表示扶我起來我還能學！
接下來我們要說到但是一個可以開發桌面級應用的框架Electron。
先簡單介紹一下Electron，它是由GitHub團隊開發，目前在GitHub上star已經超過了83k，還是非常受歡迎的。
官方網站：https://www.electronjs.org/
GitHub地址：https://github.com/electron/electron
那Electron到底是個什么東西呢？官方網站首頁用一句話為我們進行了概括：
使用 JavaScript，HTML 和 CSS 構建跨平台的桌面應用程序
從上面這句話我們可以看出，作為前端開發者，我們也可以根據基本的web開發語言來開發桌面級的應用，聽起來還是很誘人的，但是還會誘人擔心開發的軟件會不會存在一些與原生語言開發的有差距呢？這點不必擔心，很多大公司也都在用Electron進行開發並有許多非常成功的案例，如我們程序員用到的VSCode，Atom等就是基於Electron開發的。
接下來我們來看一張圖來進一步搞清楚Electron：
從上圖可以看出Electron基於了谷歌的內核Chromium，為我們提供了強大的UI支持，使我們不用再考慮各瀏覽器的兼容性問題。Node.js為我們提供了強大的后端服務支撐，可以非常方便的集成管理npm包，Native API為我們提供了多平台的統一API，可以在Windows，Mac和Linux等不同平台上進行運行。
接下來我們就通過Electron來從最基本的hello world開始進行開發。
首先我們需要安裝Node.js，安裝方式還是很簡單的，在官網上找到下載地址一路確認即可安裝成功。
官網地址：https://nodejs.org/zh-cn/
安裝成功后我們在電腦的命令行工具中輸入 node -v ，npm -v，如果這兩個命令都返回相應的版本信息說明我們已經安裝成功來，我們最好安裝node v7 以上的版本。
Electron官方網站其實已經為我們初學者提供了一個簡單的應用 https://www.electronjs.org/docs/tutorial/first-app#installing-electron，但是本着開發者的精神我們還是要一步一步地將代碼進行敲打才能融入到腦子里，接下來本人寫的代碼可能跟官方的有些出入，但大體上是一致的。
首先我們在本地創建一個文件夾 electron-demo，然后進入該目錄通過命令行的方式輸入 npm init ，這樣我們就初始化了一個node開發環境，並在文件夾下會生成一個package.json 的文件，如下：
然后我們通過命令行的方式引入electron包 npm install electron --save ，基於網絡原因可能下載會慢一些，我們可以通過淘寶鏡像的cnpm進行下載。
安裝完成后我們在electron文件夾下創建index.html和index.js文件，最后目錄結構如下：
我們在index.html內寫入了一個最基本的hello world，就像我們平時寫html文件一樣，接下來就是重點的index.js文件了。
1 const {app, BrowserWindow} = require('electron'); 2 3 function createWindow() { 4 // 創建瀏覽器窗口 5 let win = new BrowserWindow({ 6 width: 800, // 寬 7 height: 600, // 高 8 webPreferences: { // 啟用node可以在渲染進程中使用 9 nodeIntegration: true 10 } 11 }); 12 13 // 並且為你的應用加載index.html 14 win.loadFile('index.html'); 15 16 // 打開開發者工具 17 win.webContents.openDevTools(); 18 19 // 將 win 置為 null，防止占用內存 20 win.on('closed', () => { 21 win = null; 22 }); 23 } 24 25 app.on('ready', () => { 26 createWindow(); 27 });
在上面的代碼中，我都加了注釋，代碼看起來其實並不復雜，就是引入electron，然后根據electron提供的方法打開一個800*600的窗口。
接下來我們看一下官方為我們提供的js寫法：
1 const {app, BrowserWindow} = require('electron') 2 3 function createWindow() { 4 // 創建瀏覽器窗口 5 const win = new BrowserWindow({ 6 width: 800, 7 height: 600, 8 webPreferences: { 9 nodeIntegration: true 10 } 11 }) 12 13 // 並且為你的應用加載index.html 14 win.loadFile('index.html') 15 16 // 打開開發者工具 17 win.webContents.openDevTools() 18 } 19 20 // Electron會在初始化完成並且准備好創建瀏覽器窗口時調用這個方法 21 // 部分 API 在 ready 事件觸發后才能使用。 22 app.whenReady().then(createWindow) 23 24 //當所有窗口都被關閉后退出 25 app.on('window-all-closed', () => { 26 // 在 macOS 上，除非用戶用 Cmd + Q 確定地退出， 27 // 否則絕大部分應用及其菜單欄會保持激活。 28 if (process.platform !== 'darwin') { 29 app.quit() 30 } 31 }) 32 33 app.on('activate', () => { 34 // 在macOS上，當單擊dock圖標並且沒有其他窗口打開時， 35 // 通常在應用程序中重新創建一個窗口。 36 if (BrowserWindow.getAllWindows().length === 0) { 37 createWindow() 38 } 39 }) 40 41 // 您可以把應用程序其他的流程寫在在此文件中 42 // 代碼 也可以拆分成幾個文件，然后用 require 導入。
從上面官方提供的寫法可以看出在 app啟動和關閉時做了相應的操作，這些后續我們會逐步用到。
待index.js完成后我們再對package.json進行如下修改：
1 { 2 "name": "electron-demo", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "start": "electron ." 8 }, 9 "author": "", 10 "license": "ISC", 11 "dependencies": {}, 12 "devDependencies": { 13 "electron": "^9.0.5" 14 } 15 }
在 scripts 中增加了一個 start 的啟動方式，接下來我們就可以通過 npm run start 來啟動我們的demo項目來，最終的運行結果如下：
最后我們再來看一下整個項目的運行過程，當我們運行 npm run start 時其實是運行了 package.json 中 scripts 中的 electron . 的命令，然后hi通過 package.json 中的 main 字段找到 index.js，這個index.js 我們可以隨便命名，一般命名為 main.js，本人只是在 npm init 的時候就用了默認的 index.js，當找到index.js后執行里面的代碼，就是我們上面所說的執行electron創建一個窗口，通過 loadFile() 方法執行index.html文件，生成來一個我們想要的窗口應用。
我們可以理解為package.json中定義的入口文件main就是主進程，一般一個程序只有一個主進程，一個或多個線程，我們可以利用這一個主進程打開多個線程，即打開了多個類似於index.html的窗口。