Electron – 基礎學習(2): 項目打包成exe桌面應用

項目建立完成，啓動正常，接下來就是項目打包了。將測試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：上面b2一、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應用程序，啓動項目。