在開發 Electron 應用的過程中，打包 和 自動更新 是兩個不可或缺的重要步驟。通過打包，你可以將應用程式發布給使用者，讓他們在不同的操作系統（如 Windows、macOS、Linux）上使用。而自動更新功能則確保當應用有新版本時，使用者可以自動獲得更新，無需手動下載和安裝，從而提升使用者體驗。

在本文中，我們將介紹如何使用 Electron Builder 來打包應用，以及如何使用 Electron Updater 來實現自動更新功能。

打包應用

為什麼需要打包？

打包是將你的 Electron 應用編譯成可執行的文件，並進行發布的一個過程。打包後的應用可以直接在使用者的操作系統上運行，並且打包過程會自動幫助你處理與應用依賴相關的問題，確保應用能在不同的環境中正確運行。

使用 Electron Builder 進行打包

Electron Builder 是一個非常流行且功能強大的打包工具，支援多平台的打包，並且可以輕鬆配置自動更新功能。

安裝 Electron Builder

首先，你需要將 Electron Builder 安裝到你的專案中：

npm install --save-dev electron-builder

配置 package.json

接著，修改 package.json 文件，添加打包配置。在 package.json 中增加以下配置：

{
  "name": "your-app-name",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.example.yourapp",
    "productName": "Your App Name",
    "files": [
      "dist/**/*",
      "main.js"
    ],
    "directories": {
      "buildResources": "assets"
    },
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": "AppImage"
    }
  }
}

• appId：應用的唯一標識符。
• productName：應用的名稱，這將顯示給使用者。
• files：指定哪些文件會被打包進應用中，例如你的應用程式文件。
• win、mac、linux：針對不同平台的打包配置。例如，Windows 平台使用 NSIS 來生成安裝包，macOS 則使用 DMG。

執行打包

配置完成後，你可以運行以下命令來打包應用：

npm run build

這將生成針對系統的可執行文件，例如在 Windows 上會生成 .exe 文件，而在 macOS 上會生成 .dmg 文件。你可以將這些文件發布給使用者。

多平台打包

Electron Builder 支援跨平台打包。例如，你可以在 macOS 上打包 Windows 和 Linux 的應用，或者在 Windows 上打包 macOS 的應用。然而，這通常需要你安裝對應平台的工具（如 Wine 用於在 macOS 上打包 Windows 應用）。

你可以使用以下命令來打包所有平台的應用：

npm run build -- -mwl

這將同時打包 macOS、windows 和 Linux 平台的應用。

如果要設定免安裝檔（windows）的話，可以在 electron-builder.yml 檔案中設定

win:
  target:
    - portable

自動更新

自動更新功能允許應用在偵測到新版本時自動下載並安裝，這樣使用者無需手動下載新版本，從而提升應用的使用體驗。

使用 Electron Updater

Electron Updater 是 Electron 官方推薦的自動更新模組，它與 Electron Builder 深度集成，可以輕鬆實現自動更新。

安裝 Electron Updater

npm install electron-updater

配置自動更新

在主程式中（通常是 main.js），導入並配置 autoUpdater：

const { app, BrowserWindow } = require('electron');
const { autoUpdater } = require('electron-updater');
const path = require('path');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  // 啟動應用後檢查更新
  autoUpdater.checkForUpdatesAndNotify();
});

// 當有可用更新時
autoUpdater.on('update-available', () => {
  mainWindow.webContents.send('message', '有新的版本可以更新');
});

// 當更新已經下載完成
autoUpdater.on('update-downloaded', () => {
  mainWindow.webContents.send('message', '更新已下載，應用將重新啟動以安裝更新');
  autoUpdater.quitAndInstall();
});

設置更新伺服器

Electron Updater 需要一個伺服器來提供應用的更新檔案。你可以選擇使用 GitHub 來存放更新檔案，也可以使用其他專用伺服器。

使用 GitHub 發佈更新

1. 在 GitHub 上建立一個 Release。
2. 將打包後的應用文件（如 .exe 或 .dmg）上傳到該 Release。
3. Electron Updater 會自動檢測到 GitHub Release 上的更新，並下載新版本。

需要注意的是，需要在 package.json 中配置應用的 repository 信息，並確保應用版本號正確：

{
  "repository": {
    "type": "git",
    "url": "https://github.com/yourusername/yourrepository"
  }
}

使用自建更新伺服器

如果選擇使用自建伺服器來發布更新，需確保伺服器上有正確的更新文件（包括 .yml 文件和應用包），並在 Electron 中配置更新伺服器的 URL：

autoUpdater.setFeedURL({
  provider: 'generic',
  url: 'https://your-update-server.com/updates/'
});

自動更新流程

自動更新的基本流程如下：

1. 應用啟動時檢查更新：當應用啟動時，自動更新模組會檢查伺服器上是否有可用的更新。
2. 下載更新：如果有新版本可用，應用會自動下載更新文件。
3. 安裝更新：更新下載完成後，應用將重新啟動並安裝更新。
4. 通知使用者：整個過程中，應用可以通過提示通知使用者正在下載更新或已經安裝更新。

注意事項

簽署應用

在 macOS 和 Windows 平台上，發布的應用必須進行簽名才能啟用自動更新功能。你可以通過購買數字簽名證書來實現應用的簽名，這對於保證應用安全性和防止系統攔截應用非常重要。

處理版本號

每次發佈新版本時，務必要更新 package.json 中的 version 字段。Electron Updater 依賴於版本號來判斷是否有新版本，因此版本號的正確管理至關重要。

測試自動更新

在真正發佈應用之前，請確保在開發和測試環境中對自動更新功能進行充分測試。
可以設置一個測試的更新伺服器，並模擬新版本的發佈過程來確保自動更新功能正常運行。

總結

打包和自動更新是將 Electron 應用推向生產環境的關鍵步驟。透過 Electron Builder，你可以輕鬆地為多個平台打包應用，並且使用 Electron Updater 可以確保應用在發佈新版本後自動更新，提升使用者體驗。

這些工具和流程讓應用從開發階段順利過渡到實際使用者手中，並且保持更新迭代，確保應用隨時保持最新的功能和修復。