本人初學Electron，把學習的過程記錄了下來，以免以後忘記：
Electron筆記一：安裝
Electron筆記二：http與websock的實作
Electron筆記三：調用外部程式（子程序管理）
Electron筆記四：Dll的調用
Electron筆記五：無需控件，HTML5直接播放rtsp（攝像頭）
Electron筆記六：打包成可執行程式（.exe）
1. 安裝electron-packager
npm install electron-packager --save-dev
2.打包指令
基本指令：
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
指令說明：
sourcedir：項目源檔案所在路徑（唯一的必須參數）
appname：項目名稱（直接使用package.json檔案中的name屬性更友善）
platform：要建構哪個平台的應用（Windows、Mac 還是 Linux）
arch：決定了使用 x86 （ia32）還是 x64（x64），還是兩個架構都用
optional options：可選選項
舉例說明：
electron-packager ./ demoapp --win --arch=x64 --out ../outputs
本項目實際應用：如果每次打包都輸入就太麻煩了，可以簡化指令，做一個快捷方式，在package.json中，多加一個"build"項
"scripts": {
"start": "chcp 65001 && electron main.js",
"build": "electron-packager ./ demoapp --win --arch=x64 --out ../outputs --electron-zip-dir=../electron-zip --icon=logo.ico --overwrite --extra-resource=./resources/bin/"
},
以後隻需要在cmd中直接輸入npm run build即可打包了。
其中
--icon是圖示，我們放一個logo.ico在根目錄中
--overwrite :如果已打過包，就覆寫
--electron-zip-dir :為防止每次打包都下載下傳Electron，可先把下載下傳好包 electron-v13.1.7-win32-x64.zip放到\electron-zip中，electron離線下載下傳包
--extra-resource : ./resources/bin/ 額外的資源包，打包後檔案的檔案都會在\outputs\demoapp-win32-x64\resources\app中，exe檔案在根目錄中，則直接運作就找不到csdtk.dll檔案和ffmpeg.exe，這時隻需要把resources\app\resources\bin拷貝到resources\bin中，需加入"win":
"extraResources": [ { "from": "./resources/bin", "to": "./bin" }就可實作此功能。
代碼如下：
"devDependencies": {
"electron": "^13.1.7",
"electron-packager": "^15.3.0"
},
"dependencies": {
"child_process": "^1.0.2",
"ffi-napi": "^4.0.3",
"fluent-ffmpeg": "^2.1.2",
"http-server": "^0.12.3",
"iconv-lite": "^0.6.3",
"ref-array-di": "^1.2.2",
"ws": "^7.5.3"
},
"build": {
"appId": "demoapp",
"win": "./logo.ico",
"extraResources": [
{
"from": "./resources/bin",
"to": "./bin"
}
]
}
運作 npm run build 之後exe檔案生成了
3.加密資源，打包代
可以看到，在每個包下的resources檔案夾裡的app檔案夾 就是我們寫的程式，這樣我們的代碼就是暴露在使用者電腦上的，這非常的不安全，還好electron 自帶了加密功能。
安裝 asar: npm install -g asar
安裝完成以後,就可以使用asar指令講程式檔案打包了，cmd進入resources\app\resources目錄
asar pack ./app app.asar
執行完畢以後，在./下可以看到app.asar檔案，把他複制到./OutApp/mclans.../resources/下，然後把resources下的app檔案夾删除，運作resources上層的.exe檔案可以啟動應用了。
運作demoapp.exe,一切都正常