Electron提供了兩個打包工具，本文將分別嘗試使用兩個工具對項目打包，並分析其打出來的包的結構。
一、使用electron-builder打包
https://github.com/electron-userland/electron-builder
先安裝此工具：
npm install electron-builder -g
確認是否安裝成功：
這里是以官方以供的electron-quick-start項目作為例子打包，這個項目的倉庫：
https://github.com/electron/electron-quick-start
打包前需要先為項目添加一些打包選項，編輯項目根目錄下的package.json文件，為其添加build選項：
"build": {
"appId": "cc11001100.electron.example-001", // 程序包名
"copyright": "CC11001100", // 版權相關信息
"productName": "example-001", // 項目名字
"dmg": {
"background": "res/background.png", // 背景圖片的路徑
"window": {
// 啟動后窗口左上角位置
"x": 100,
"y": 100,
// 啟動后窗口的大小
"width": 500,
"height": 300
}
},
"win": {
// 打包后的文件會有個圖標，這個圖標的路徑，不指定的話默認的不好看
"icon": "res/logo.png"
}
然后在項目的根路徑下執行：
electron-builder
即可開始打包：
因為我這兒已經不是第一次打包了，所以輸出內容比較少，第一次打包的話會根據不同平台下載一些對應的文件，因為Electron打包是要把Chromium的運行時打包進去的，這也是Electron開發的程序被人詬病的一個地方（另一個著名的梗就是Electron開發的程序普遍很卡、吃內存，用腳想想跑在瀏覽器上它能不卡不吃內存嗎...），所以哪怕是一個很簡單的小玩具，打包出來可能都要好幾十M。
如果每次打包的時候都要執行此命令比較麻煩的話，可以為package.json添加一個dist命令：
Electron是跨平台的，這個跨平台是借助的統一的運行時node+Chromium，這倆可不是跨平台的，所以在打包的時候要指定平台然后下載對應平台這倆的版本作為運行時打到包里，如果不指定的話，默認會打適合當前系統環境的包：
electron-builder --platform=darwin electron-builder --platform=win32 electron-builder --platform=linux
更多詳細選項請查閱GitHub倉庫上的文檔，這里只是一個引子知道有這么個玩意兒。
二、分析electron-builder打出來的包
electron-builder打包成功的文件會放在項目根目錄的dist文件夾下：
這個exe文件就是win平台的運行包，雙擊即可運行，嘗試只將這一個exe文件拷貝到一個單獨的文件夾會發現也是可以運行的。
但是這個exe文件實際上是一個壓縮文件，將后綴改為zip然后使用壓縮文件打開：
解壓到本地，看下都有哪些文件：
這個文件夾下的example-001.exe也是能夠運行的，其它的都是一些亂七八糟的依賴庫之類的，我們的關注點不在這個上面，徑直進入resources這個文件夾，這里面有個叫app.asar的文件：
這個asar格式的文件其實就是一個歸檔文件，可以安裝asar：
npm i asar -g
然后到這個目錄直接解壓這個文件：
asar e app.asar app
進去一看，好家伙，整個項目的代碼都在這放着呢：
隨便打開一個看下，發現連混淆都沒有混淆：
asar格式的文件就是一個歸檔文件，只不過它的歸檔方式是采用了另一種結構，但是只需要按照它的結構解包就能得到原始的文件，解包用它提供的命令即可都不用自己寫。
三、使用electron-packager打包
https://github.com/electron-userland/electron-packager
首先將這個工具安裝到項目的開發環境依賴：
npm install electron-packager --save-dev
工具使用的格式為：
electron-packager < sourcedir > < appname > --platform= < platform > --arch= < arch> [optional flags...]
然后直接打包就可以了：
默認是打包當前平台的版本，如果需要打包其他版本，則通過--platform指定，這里不再詳述，直接去GitHub查閱官方文檔。
四、分析electron-packager打出來的包
這是electron-packager打包出來的代碼，同樣有個exe程序，不過這里關注的重點仍然是resources文件夾：
進入看一下，只有一個app.asar文件：
和前面那個打包工具一樣，這個打包工具如果不在打包的時候指定--asar的話連歸檔不會歸檔，直接就把源代碼放在這個路徑下了。用asar解包看下它的內容：
進入app看一下，果然正是項目的源碼：
五、總結
1. Electron是跨平台的，打包的時候需要區分不同的平台打包。
2. Electron對源代碼打包的方式是asar，這是一個歸檔格式，這意味着源代碼並沒有加密，逆向成本非常低，解個包能看懂JS和Electron就行。