Electron入門應用打包exe（windows）

標籤：案頭   為什麼   package   pre   令行   hello   工具   依賴   利用   

最近在學習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的第二種打包方法（編輯package.json的打包方法），為什麼要建app檔案夾，是通過看別人的博文和多次測試得到的結論，由於是初學，暫且認為是一種機制吧，希望通過後面的學習來更加深刻的認識裡面的含意。

Electron入門應用打包exe（windows）