使用 electron-builder 打包 Electron 程式

前言

在將 Electron 程式碼開發完成後，如果想要投入生產環境，那就必須經過很關鍵的一步——打包。

今天就將 MacOS 上使用 electron-builder 打包 Electron 應用的過程做一個記錄。

為什麼要打包

我上一篇文章《使用 VSCode 除錯 Electron 主程式程式碼》介紹了在開發環境下執行 Electron 程式的方法，既然可以正常執行了，那為什麼還需要經過打包的步驟呢？原因如下：

1. 為了實現跨平臺的目的
   在打包之前，如果我將原始碼拷貝一份到其他作業系統（比如 windows）上，那要正常執行的話，必須在對應的系統上安裝適配該系統的 Electron 執行程式。
   為了減小跨平臺的複雜度，我們需要針對各個不同的平臺，將程式程式碼打包成適配平臺的應用程式，達到直接使用的目的。
2. 為了減小程式碼體積
   一個最基本的 Electron 程式，其開發環境程式碼體積大約 170MB，因為有較多開發依賴（devDependencies），對於程式的傳輸極不友好。
   可以通過打包的手段，排查掉眾多開發依賴，精簡應用程式碼體積。

環境

• 作業系統： macOS Catalina 10.15.7
• Electron Version: 16.0.6
• electron-builder: 22.14.5
• 程式程式碼：《使用 VSCode 除錯 Electron 主程式程式碼》中用到的 electron-quick-start 目錄

打包步驟

1. 安裝 electron-builder

    mkdir electron-builder
    cd electron-builder
    yarn init -y
    yarn add electron-builder -D

   這裡建議將 electron-builder 安裝在單獨的目錄，方便複用。

2. 新增打包指令（也可直接在終端執行）

    // electron-quick-start/package.json
    {
        "name": "myApp",
        ……
        "scripts": {
            ……
            "build": "../electron-builder/node_modules/.bin/electron-builder"
        },
        ……
    }

   執行 npm run build 之後，終端資訊如下：

    > Executing task: npm run build <
    > myApp@1.0.0 build
    > ../electron-builder/node_modules/.bin/electron-builder
   
      • electron-builder  version=22.14.5 os=19.6.0
      • writing effective config  file=dist/builder-effective-config.yaml
      • packaging       platform=darwin arch=x64 electron=16.0.6 appOutDir=dist/mac
      • default Electron icon is used  reason=application icon is not set
      • skipped macOS application code signing  reason=cannot find valid "Developer ID Application" identity or custom non-Apple code signing certificate, see https://electron.build/code-signing allIdentities=     0 identities found
                                                    Valid identities only
         0 valid identities found
      • building        target=macOS zip arch=x64 file=dist/myApp-1.0.0-mac.zip
      • building        target=DMG arch=x64 file=dist/myApp-1.0.0.dmg
      • building block map  blockMapFile=dist/myApp-1.0.0.dmg.blockmap
      • building block map  blockMapFile=dist/myApp-1.0.0-mac.zip.blockmap

   在 electron-quick-start 下生成的 dist 資料夾，其檔案結構如下：

    ./dist
    ├── builder-debug.yml
    ├── builder-effective-config.yaml
    ├── latest-mac.yml
    ├── mac
    │   └── myApp.app
    ├── myApp-1.0.0-mac.zip
    ├── myApp-1.0.0-mac.zip.blockmap
    ├── myApp-1.0.0.dmg
    └── myApp-1.0.0.dmg.blockmap

3. 打包配置
   可根據自己的需要，在 package.json 中增加配置項。

    // electron-quick-start/package.json
    {
        "name": "myApp",
        ……
        "scripts": {
            ……
            "build": "../electron-builder/node_modules/.bin/electron-builder"
        },
        ……
        "build": {
            "productName": "myFirstApp",    // 指定打包成的程式名稱，可包含空格
            "appId": "bianchengsanmei",
            "directories": {
                "output": "build" // 指定打包程式的輸出目錄
            },
            "mac": {
                "target": "dmg"
            },
            "dmg": {
                "backgroundColor": "#fff"
            }
        }
    }

   具體相關配置可檢視 electron-builder 官方文件。

打包前後體積比較

開發環境總體積：

打包生成的 .dmg 安裝包體積：

可以看到，通過打包，使得程式體減少了一大半。

總結

以上就是一次簡單的 Electron 應用打包過程，希望能夠對你有所幫助。

~

~ 本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以餘韻相贈！

知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！

本作品採用《CC 協議》，轉載必須註明作者和本文連結