Electron – 基礎學習(1): 環境安裝、建立專案及入門
這幾天到年底了，公司也沒啥事，閒著就到處瞅瞅。記得上一家公司的時候用 Electron+ng1 寫過專案，只是那個時候專案框架都是別人搭的，自己只負責寫功能，對Electron沒啥認識。 這幾天想著反正閒著也是閒著，就撿起來自己玩玩，順便記錄一下。
一、環境安裝：
前端開發，現在不管是那個方向，都免不了使用NPM，所以node.js的安裝是必須的，也是最基礎的一步。
1、安裝node.js，從官網 https://nodejs.org/en/ 下載當前node.js LTS包(穩定版本)，下載完成後，雙擊執行。安裝完成後，通過CMD命令列 可以看到當前node、npm版本號。
2、npm安裝完成後，接下來安裝electron。
npm install -g electron 或 cnpm install -g electron (不會cnpm 自行度娘cnpm)
注：npm安裝，由於資源伺服器在國外，請求資源網速較慢，在node install.js 會卡很久(甚至下載失敗)，所以建議用cnpm 安裝。
npm 終於安裝完成了(足足花了40分鐘)。
二、建立專案：
npm 和 electron 安裝完成後，接下來就可以建立專案了。建立專案有以下三種方式：Git拷貝、通過electron社群提供的命令列工具(CLI) electron-forge 建立專案、直接建立
(1)、Git拷貝：Git拷貝，實際就是複製官方
複製並執行這個庫electron/electron-quick-start
a：新建一個資料夾(路勁中不能含有中文) 克隆這個倉庫：https://github.com/electron/electron-quick-start.git
b：通過命令列(CMD)進入該專案資料夾 electron-quick-start 或程式碼編輯工具(vscode、webstorm)等直接開啟該專案。
c：進入專案資料夾或開啟該專案後，需要安裝專案執行的依賴庫，直接執行命令：npm install
d：依賴庫安裝完成，就可以啟動該應用了，執行命令：npm start
(2)、第二種是通過electron社群提供的命令列工具(CLI) electron-forge 建立專案。
electron-forge官網：https://www.npmjs.com/package/electron-forge或https://www.worldlink.com.cn/osdir/electron-forge.html
這種方法，前提是先安裝CLI工具 electron-forge。由於是CLI工具，便於以後使用，建議全域性安裝(和安裝electron一樣，只需首次安裝即可)。
npm install -g electron-forge 或 cnpm install -g electron-forge
electron-forge安裝完成後，通過執行命令：electron-forge init XXXXXX建立專案，其中XXXXXX 既是新建專案的專案名稱，同時會新建XXXXXX資料夾以存放專案原始檔。
electron-forge init electronTest
，Installing NPM Dependencies和安裝electron一樣，會比較久，耐心等候。
注：安裝模組過程中，若安裝失敗則刪掉node_modules資料夾，重新進入到專案資料夾或開啟專案 執行npm install或 cnpm install即可。
等待 Installing NPM Dependencies 執行完成後，進入到專案資料夾XXXXXX(是該專案的資料夾，不是建立該專案的資料夾，建立該專案的資料夾是該專案的父級資料夾)或開啟專案XXXXXX執行命令：npm start 啟動當前專案(通過 electron-forge 建立的專案，在 npm start 啟動專案時或專案打包時，會優先檢測系統環境Checking your system)。
(3)、第三種是新建各種檔案，直接建立專案。
a：新建一個資料夾 （該資料夾既是專案名稱，同時用以存放專案原始檔。注：資料夾名稱不能含有中文）
b：通過命令列(CMD)進入該新建資料夾 或 程式碼編輯工具(vscode、webstorm)等直接開啟該新建資料夾 新建一個 index.html 和一個main.js 檔案。同時將下面 入門內的程式碼分別複製到對應的檔案。
c：初始化 package.json 檔案（用以存放專案配置引數），執行命令npm init，然後根據提示進行引數填寫。（注：package.json檔案 可以自己新建，也可以不新建。npm init 命令執行完畢後，會自動生成。特注：package.json裡面配置項 entry point： 對應的JS檔案(此處為main.js)必須是入口 JS(主程序所在JS檔案)）
npm init
d：index.html 和 main.js 新建完成，package.json配置初始化完成，接下來區域性安裝electron (之前是全域性安裝的)，執行命令：npm install --save-dev electron(安裝時間還是一如既往的長) 或 cnpm install --save-dev electron。
npm install --save-dev electron 或 cnpm install --save-dev electron
安裝專案依賴包：npm install 或 cnpminstall
npm install 或cnpminstall
e：檔案新建完成，依賴包正常安裝完成。最後一步 啟動當前專案：npm start
三、入門：
index.html檔案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag --> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html>
main.js檔案
const {app, BrowserWindow} = require('electron');
// 保持對window物件的全域性引用，如果不這麼做的話，當JavaScript物件被
// 垃圾回收的時候，window物件將會自動的關閉
let win;
function createWindow() {
// 建立瀏覽器視窗。
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// 載入index.html檔案
win.loadFile('index.html');
// 開啟開發者工具
win.webContents.openDevTools();
// 當 window 被關閉，這個事件會被觸發。
win.on('closed', () => {
// 取消引用 window 物件，如果你的應用支援多視窗的話，
// 通常會把多個 window 物件存放在一個數組裡面，
// 與此同時，你應該刪除相應的元素。
win = null;
});
}
// Electron 會在初始化後並準備
// 建立瀏覽器視窗時，呼叫這個函式。
// 部分 API 在 ready 事件觸發後才能使用。
app.on('ready', createWindow);
// 當全部視窗關閉時退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非使用者用 Cmd + Q 確定地退出，
// 否則絕大部分應用及其選單欄會保持啟用。
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 在macOS上，當單擊dock圖示並且沒有其他視窗開啟時，
// 通常在應用程式中重新建立一個視窗。
if (win === null) {
createWindow();
}
});
// 在這個檔案中，你可以續寫應用剩下主程序程式碼。
// 也可以拆分成幾個檔案，然後用 require 匯入。
package.json檔案
{ "name": "electron-self-built", "version": "1.0.0", "description": "electronSelfBuilt", "main": "main.js", "scripts": { "start": "electron .", "package": "electron-packager . myClient --win --out myClient --arch=x64 --electron-version=7.1.9" // electron-packager 打包配置 }, "author": "", "license": "ISC", "devDependencies": { "electron": "^7.1.9" }, "private": true }
文件註釋很清楚。