Electron入門應用打包exe（windows）

最近在學習nodejs,得知Electron是經過將Chromium和Node.js合併到同一個運行時環境中，用HTML，CSS和JavaScript來構建跨平臺桌面應用程序的一門技術。對於以前一直從事flash AIR桌面應用開發的我火燒眉毛的想「嚐嚐鮮」。

首先，咱們跟着Electron社區的快速入門程序（https://electronjs.org/docs/tutorial/quick-start）建立個人第一個electron App（HelloWorld）。

1.在命令行裏安裝全局electron：

npm install -g electron

Ps:在這以前你須要安裝nodejs，npm。

2.參照入門程序，app建立完成，包機構以下：

前面咱們全局安裝了electron，如何運行app呢？

在當前窗口打開命令行，輸入以下命令：

electron .

app建立成功！不要着急，本講的重點是介紹如何打包成exe（折騰了我大半天），看了好多別人關於打包的博文，可能因爲本身是一個初學者理解不夠深刻，以爲都不是那麼通俗易懂，因此準備趁熱打鐵，寫一篇分享給後面學習的人。言歸正傳，

3.安裝打包工具，我是使用的electron-packager，首先全局安裝一下：

npm install electron-packager -g

4.打包以前須要在當前app裏安裝依賴（上面運行是利用electron的全局命令，打包須要app裏安裝本身的依賴，後面且稱作局部依賴），當前app的依賴只有electron，在命令行執行：

electron -v

獲取當前electron全局安裝的版本號。

5.編輯package.json，npm安裝局部依賴:

npm install

6.測試局部依賴是否安裝成功，在app根目錄執行命令行：

npm start

程序運行，局部依賴安裝成功。

7.打包前爲當前app製做icon：icon.ico，256*256。製做好放入app根目錄。

8.electron-packager打包：electron-packager打包有兩種方式，一是直接在命令行編輯命令，直接進行打包。另外一種是在package.json裏編輯package，執行npm run-script package。

(1)在app根目錄執行命令行：

electron-packager . 'HelloWorld' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1

打包成功。如圖

（2）首先編輯package.json，

在app(electron-helloworld)根目錄建立app文件夾，並把main.js， index.html 和 package.json拷貝進去（拷貝並不是剪切），而後在electron-helloworld根目錄打開命令行：

npm run-script package

打包成成功。

命令行打包參數：

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

參數說明： 
* location of project：項目所在路徑 
* name of project：打包的項目名字 
* platform：肯定了你要構建哪一個平臺的應用（Windows、Mac 仍是 Linux） 
* architecture：決定了使用 x86 仍是 x64 仍是兩個架構都用 
* electron version：electron 的版本 
* optional options：可選選項

小結：對於electron-packager的第二種打包方法（編輯package.json的打包方法），爲何要建app文件夾，是經過看別人的博文和屢次測試獲得的結論，因爲是初學，暫且認爲是一種機制吧，但願經過後面的學習來更加深入的認識裏面的含意。