本文主要介紹如何利用Electron將前端代碼打包成exe文件。

其實如何通過Electron將前端代碼打包成exe文件，其入門教程講的挺詳細的，但是瀏覽一遍下來還是不太清楚到底該怎麽操作，這裏只是將其細化分解。

首先，我們需要確保我們的電腦上已經配置好了Node.js環境，如果沒有的話，請到Node.js下載並安裝配置。

其次，我們需要有一個寫好的Electron應用，如果你不嫌麻煩的話，可以按照入門教程中的打造你第一個Electron應用一步一步自己手動創建，但是我會從他的GitHub倉庫裏直接下載示例程序來構建Electron應用，因為示例程序中已經包含了必需的index.html, main.js, package.json。這一點，入門教程中也有提及。

1 # 克隆這倉庫
2 $ git clone https://github.com/electron/electron-quick-start
3 # 進入倉庫
4 $ cd electron-quick-start
5 # 安裝依賴庫並運行應用
6 $ npm install && npm start

通過上述命令npm install && npm start，我們即可打開示例Electron應用了。

通過view選項中的Toggle Developer Tools，我們可以打開開發者工具對代碼進行調試，這一點和直接使用瀏覽器進行開發沒有什麽區別。

接下來，我們只需要將我們寫好的代碼整合到上述Electron應用中即可了。

當我們需要交付成果物給客戶時，我們不可能要求客戶配置好Node.js環境，同樣不可能讓客戶通過命令運行我們的應用程序，這個時候我們需要使用Electron部署前端應用程序。這一點，入門教程中也有提及。

然後，我們下載好指定的二進制文件（我下載的是electron-v1.7.0-win32-x64.zip，解壓到electron-build中，名稱隨便定），然後將我們整合之後的Electron應用文件夾重命名為app，放到Electron的資源文件夾下（在macOS中是指Electron.app/Contents/Resources/，在Linux和Windows中是指electron-build

接著，運行Electron.app（或者Linux中的electron，Windows中的electron.exe），Electron就可以不依賴Node.js運行我們的應用程序了。

最後，就可以將整個的electron-build交付給客戶使用了。

有一點需要註意的是，如果不做任何操作，在Electron中直接使用jQuery會沒有效果或直接產生異常，解決方案如下：

將jquery.min.js文件中最前面的

1 ! function(a, b) {
2     "object" == typeof module && "object" == typeof module.exports ? module.exports = a.document ? b(a, !0) : function(a) {
3         if (!a.document) throw new Error("jQuery requires a window with a document");
4         return b(a)
5     } : b(a)
6 }

替換為

!function(a,b){b(a)}

即可。

如果對於這種形式的成果物（並非一個正在的exe應用程序）還不是很滿意的話，可以參考這篇教程中的2. 打包成安裝包將electron-build打包成安裝包（但是通過測試，並不成功，有興趣的童鞋可以深入研究一下）。

Electron打包前端代碼