從零開始搭建Electron+Vue+Webpack項目框架，一套代碼，同時構建客戶端、web端（一）

• 2019 年 10 月 29 日
• 筆記

摘要：隨着前端技術的飛速發展，越來越多的技術領域開始被前端工程師踏足。從NodeJs問世至今，各種前端工具腳手架、服務端框架層出不窮，“全棧工程師”對於前端開發者來說，再也不只是說說而已。在NodeJs及其衍生技術高速發展的同時，Nw和Electron的問世，更是為前端發展提速不少，依稀記得哪位前輩說過，“能用Js改寫的，終將用Js改寫”，這不，客戶端來了！使用Electron也有一段時間了，各種簡單複雜的問題，也都或多或少的遇見過，下決心整理出一套客戶端模板出來，一是加深一下自己的理解，二是供小夥伴們參考指正。本文選擇Electron6.x+Webpack4+vue全家桶為技術棧，一套代碼可以分別打包在客戶端和web端，結合webpack，支持熱更新，打包為exe安裝包，過程中會涉及vue全家桶、electron的常見問題、配置和優化，webpack的對應配置等。從零開始，把electron、vue、webpack統統納入自己的知識體系！

說明：本着模擬從零開始的過程，最開始的架構或者代碼設計可能不是最優解，有可能只適用於當前情況，後續會一步步完善，也可能會部分重構，關鍵是體會這個從零到一，再到完善的過程。

下面開始~~~

一、新建工程

　　1、說好的從零開始，就從新建文件夾開始吧，新建electron-vue-template文件夾。

　　2、cmd進入文件夾，執行npm init，初始化一個node項目。

　　3、完善工程目錄結構：

　　項目根目錄的結構大致就是上面這個樣子，後續完善過程中，會在對應目錄下增加相應的子目錄，後面會有講到。下面介紹一下各個目錄的作用：

　　　　app：webpack編譯後的整個項目的代碼，包括主進程和渲染進程，使用electron-builder打包exe安裝包時，會把這部分代碼打進去；

　　　　builder：webpack打包腳本，包括打包主進程、渲染進程，打包各個環境的exe安裝包，啟動各個環境的devServer等；

　　　　config：配置文件，包括環境配置、版本等；

　　　　dist：構建出的靜態文件，exe，zip等；

　　　　src：源碼目錄；

　　　　　　main：主進程源碼；

　　　　　　renderer：渲染進程源碼；

　　4、執行npm i electron -D，下載electron，如果7.0.0版本安裝不成功的話，可嘗試cnpm i [email protected] -D安裝6.1.2版本，我是嘗試了好多次都無法下載7.0.0版本，所以這裡使用的是6.1.2。

二、窗口配置，啟動一個最簡單的electron應用

　　1、進入src下的main文件夾，新建index.html和main.js文件；

　　2、index.html文件，除了常規的結構之外，隨便寫點簡單的內容即可，本文只在body標籤內寫入一下代碼：

<h1>Welcome to electron-vue-template!</h1>

 　　3、Electron文檔中說，您應當在 main.js 中創建窗口，並處理程序中可能遇到的所有系統事件。不過，隨着我們的應用逐漸複雜，可能不止存在一個窗口，在main.js寫入過多邏輯或者配置的話，會使我們的項目越來越難維護，所以正確的做法是，對應的窗口有自己專門的Js文件，負責這個窗口的配置和事件監聽，而main.js文件只需要負責窗口的調度和系統級別的事件監聽。當然，我們今天的目的是啟動一個最簡單的electron應用，所以直接寫在了main.js文件里：

const url = require('url');  const path = require('path');  const { app, BrowserWindow } = require('electron');  function createWindow() {      let win = new BrowserWindow({          width: 800,          height: 600      });      // 獲取index.html的file協議路徑      const indexPath = url.pathToFileURL(path.join(__dirname, 'index.html')).href;      // 如果路徑或者參數中含有中文，需要對路徑進行編碼處理      win.loadURL(encodeURI(indexPath));      // 打開開發者工具      win.webContents.openDevTools();      // 監聽窗口的關閉事件，釋放窗口對象      win.on('closed', () => {          win = null;      });  }    // 創建窗口  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) createWindow();  });

 　　Electron apps 使用JavaScript開發，其工作原理和方法與Node.js 開發相同。Electron模塊包含了Electron提供的所有API和功能，引入方法和普通Node.js模塊一樣：Electron模塊所提供的功能都是通過命名空間暴露出來的。 比如說：Electron.app負責管理Electron 應用程序的生命周期，Electron.BrowserWindow類負責創建窗口。

　　4、啟動應用

　　廢了這麼多話，應用到底該怎麼啟動？那還不簡單，在package.json的script標籤里新增一個start命令，命令內容為node ./src/main/main.js，然後運行npm start，程序不就執行了嘛！於是馬上添加了start命令，啟動的時候命令行就報錯了。WTF？？什麼鬼！看了報錯信息，定位到了是在app.on(‘ready’)這一行，這也能報錯？？

　　試着打印了一下app，undefined！！於是又加了兩行代碼：　　

const electron = require('electron');  console.log(electron)

　　打印了一下electron，竟然是個這玩意兒：E:[email protected]@electrondistelectron.exe，不應該是個對象嗎？

　　又翻了翻文檔，恍然大悟，Electron並不屬於node應用，通過node來執行入口文件當然是不行的，要用electron來執行，正確的命令為：electron ./src/main/main.js，再次運行npm start，看着命令行輸出的內容以及剛剛啟動的窗口，舒服的長出了一口氣。

第一篇的內容就寫到這裡了，很少系統的去總結，總感覺有些內容寫不出來，暫且做個引子吧，如果希望後續的文章對某部分詳細講解的話，歡迎留言，同時，如果有不恰當的地方，也歡迎批評指正！