專案創建完成，啟動正常，接下來就是專案打包了，將測驗Demo打包成exe桌面應用，點擊exe檔案，運行專案，
書接上文，創建專案有三種方式 Git拷貝、直接創建；通過electron社群提供的命令列工具(CLI) electron-forge 創建專案，看起來對應的專案打包方式也應該有三種才對，但其實細看第一種方式和第三種專案創建方式是一樣的，所以它們的專案打包方式也是一樣的，
打包 electron 專案webpack工具有 electron-packager 和 electron-builder 兩種，下面先從 electron-packager 開始，一個個來，
第一步：全域安裝 electron-packager，便于系統通用
npm install -g electron-packager 或 cnpm install -g electron-packager
第二步：打包 electron 專案
(1)、Git拷貝 對應打包、直接創建專案 對應打包，
a：通過命令列(CMD)進入需要打包的專案(測驗專案electron-quick-start 或 electronSelfBuilt) 專案檔案夾 或代碼編輯工具(vscode、webstorm)等直接打開專案，
b：打開 package.json 檔案，找到 "scripts" 項，查看 "scripts" 項內是否有 專案打包 相關引數配置，即“package”引數，（注：electron-quick-start 從庫上拉下來，"scripts" 項內沒有“package”引數）
圖1：無打包相關引數， “package” 不存在 圖2：有打包相關引數， “package” 存在
b1：如果 有 package引數，如上圖2所示，則繼續執行下面c步驟，進行專案打包，
b2：如果 沒有 package引數，如上圖1所示，那么也有三種打包方式，
b21：直接輸入命令 electron-packager . (注意后面這個點，在這必須要有，這個 . 在這表示源檔案所在路勁，如果源檔案和 package.json 檔案不在同一級目錄下，則應將 . 換成對應的源檔案目錄)，進行打包，
electron-packager . 或 electron-packager ./xxxxxx
打包完成后，在當前目錄下會自動生成了一個新的檔案夾 electron-quick-start-win32-x64，點開新檔案夾 electron-quick-start-win32-x64 里面有一堆檔案，如下圖所示：
b22：在 electron-packager 命令后配置打包引數(這個其實就是b21 中 electron-packager 命令的具體改良版)
命令格式：electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
引數說明：
sourcedir：專案源檔案所在路徑（唯一的必填引數，b21中的 . 就是源檔案路勁）
appname：打包完成后專案名稱（非必填引數，不填的情況下，專案打包完成后會自動以 package.json 檔案中的 productName 或 name 屬性 命名）
platform：需要構建那種平臺的應用（all，或下面的一種或幾種：darwin，linux，mas, win32 (如有多個，用, 隔開)，默認為當前主機平臺型別 （all, or one or more of: darwin, linux, mas, win32 (comma-delimited if multiple).Defaults to the host platform)）
arch：決定使用那種系統型別（all，或下面的一種或幾種：ia32(32位系統), x64(64位系統), armv7l, arm64, mips64el(如有多個，用, 隔開)，默認為當前系統型別 （all, or one or more of: ia32, x64, armv7l, arm64, mips64el (comma-delimited ifmultiple). Defaults to the host arch)）
optional options：其他可選 配置項（有很多，具體可以輸入 electron-packager 命令進行查看）
命令實體：electron-packager . tempApp --win32 tempApp --arch=x64 (備注：. ：源檔案所在路徑；tempApp ：打包完成后專案名稱；--win32：構建Windows平臺應用；tempApp：打包完成后 應用存放檔案夾；x64：64位系統)
b23：上面b21、b22兩種方式雖說都可以完成打包，但是每次打包都需要輸入老長的命令，尤其是b22，還有各種配置，這就表示我們要去記這些配置，非常麻煩，而且配置太多也容易混淆和遺忘，所以將這些配置以 “package” 引數的形式添加到 package.json 檔案 -> "scripts" 項內，如上圖二所示，
現在 "scripts" 項內也有 “package” 引數了，那么b23也就跟b1一樣了，接下來執行c步驟打包命令完成專案打包即可，
c：執行打包命令，進行打包
npm run-script package 或 cnpm run-script package
d：打包成功，在當前目錄下生成一個新的檔案夾，如下兩圖所示：
點開上兩圖 tempApp-win32-x64檔案夾 或 electron-quick-start-win32-x64檔案夾 雙擊exe應用程式，即可啟動當前應用程式，
(2)、electron-forge 創建專案 對應打包，
該配置的 electron-forge init 初始化專案的時候都配置好了，我們只需要執行命令： npm run-script package 或 cnpm run-script package 就行，所以說CLI 工具打包是真的簡單，
npm run-script package 或 cnpm run-script package
打包前源代碼檔案結構，及打包命令執行：
打包命令執行完畢，及打包后源代碼檔案結構：
進入 out檔案夾 -> electrontest-win32-x64檔案夾 找到
，雙擊exe應用程式，啟動專案，
總結：這兩種打包方式，看似不一樣，實際相差無幾，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/14737.html
標籤：HTML5