前言

文本主要講述如何為 electron 打包出來軟件配置安裝引導和結合 github 的 release 配置自動更新。

electron-builder 是將 Electron 工程打包成相應平臺的軟件的工具，我的工程是使用 electron-vite 構建的，其默認集成了 electron-builder ，下文也是基于 electron-vite 生成的工程進行講解。

下文是基于 Window 平臺講解，所以安裝包我也會說成 exe 文件

配置

electron-builder 有兩種配置方式

• 在 package.json 配置
• 使用 electron-builder.yml 配置

如果打包命令帶上 —config，就是使用 electron-builder.yml 的方式，例如

electron-builder --win --config

以下介紹都基于 electron-builder.yml 的方式，如需使用 package.json，請自行翻閱文檔轉換

詳見：CLI

NSIS安裝引導

electron-builder 生成的安裝包默認是一鍵安裝，也就是無法選擇安裝路徑等。這時候就需要用到 NSIS 了（注意：NSIS 只適用于 Window 平臺）

只需要修改 electron-builder.yml 即可，我常用的配置如下：

nsis:oneClick: false # 創建一鍵安裝程序還是輔助安裝程序（默認是一鍵安裝）allowElevation: true # 是否允許請求提升，如果為false，則用戶必須使用提升的權限重新啟動安裝程序 （僅作用于輔助安裝程序）allowToChangeInstallationDirectory: true # 是否允許修改安裝目錄 （僅作用于輔助安裝程序）createStartMenuShortcut: true # 是否創建開始菜單快捷方式artifactName: ${productName}-${version}-${platform}-${arch}.${ext}shortcutName: ${productName}uninstallDisplayName: ${productName}createDesktopShortcut: always

詳見：NsisOptions

自動更新

結合 github 的 release 配置自動更新

代碼修改

1. 修改 electron-builder.yml

   以 dubbo 倉庫舉例子：https://github.com/apache/dubbo

   # 倉庫配置
   publish:provider: github # 選擇github平臺owner: apache # github用戶名repo: dubbo # github倉庫名
   # 更新日志
   releaseInfo:releaseNotes: |這是更新日志測試測試
   

2. 工程代碼修改

   我是基于 TypeScript 的寫法，如果需要 JavaScript 的寫法，請參考文檔：Auto-Update 和 官方案例

   • 安裝 electron-updater

     npm install electron-updater
     

   • 主線程添加自動更新代碼

     import { autoUpdater, UpdateInfo } from 'electron-updater';// dev-start, 這里是為了在本地做應用升級測試使用，正式環境請務必刪除
     if (is.dev && process.env['ELECTRON_RENDERER_URL']) {autoUpdater.updateConfigPath = path.join(__dirname, '../../dev-app-update.yml');
     }
     Object.defineProperty(app, 'isPackaged', {get() {return true;}
     });
     // dev-end// 觸發檢查更新(此方法用于被渲染線程調用，例如頁面點擊檢查更新按鈕來調用此方法)
     ipcMain.on('check-for-update', () => {logger.info('觸發檢查更新');autoUpdater.checkForUpdates();
     });// 設置自動下載為false(默認為true，檢測到有更新就自動下載)
     autoUpdater.autoDownload = false;
     // 檢測下載錯誤
     autoUpdater.on('error', (error) => {logger.error('更新異常', error);
     });// 檢測是否需要更新
     autoUpdater.on('checking-for-update', () => {logger.info('正在檢查更新……');
     });
     // 檢測到可以更新時
     autoUpdater.on('update-available', (releaseInfo: UpdateInfo) => {logger.info('檢測到新版本，確認是否下載');const releaseNotes = releaseInfo.releaseNotes;let releaseContent = '';if (releaseNotes) {if (typeof releaseNotes === 'string') {releaseContent = <string>releaseNotes;} else if (releaseNotes instanceof Array) {releaseNotes.forEach((releaseNote) => {releaseContent += `${releaseNote}\n`;});}} else {releaseContent = '暫無更新說明';}// 彈框確認是否下載更新（releaseContent是更新日志）dialog.showMessageBox({type: 'info',title: '應用有新的更新',detail: releaseContent,message: '發現新版本，是否現在更新？',buttons: ['否', '是']}).then(({ response }) => {if (response === 1) {// 下載更新autoUpdater.downloadUpdate();}});
     });
     // 檢測到不需要更新時
     autoUpdater.on('update-not-available', () => {logger.info('現在使用的就是最新版本，不用更新');
     });
     // 更新下載進度
     autoUpdater.on('download-progress', (progress) => {logger.info('下載進度', progress);
     });
     // 當需要更新的內容下載完成后
     autoUpdater.on('update-downloaded', () => {logger.info('下載完成，準備更新');dialog.showMessageBox({title: '安裝更新',message: '更新下載完畢，應用將重啟并進行安裝'}).then(() => {// 退出并安裝應用setImmediate(() => autoUpdater.quitAndInstall());});
     });
     

     上面的代碼只是主線程的，還需要渲染線程和頁面配置

發布 release

1. 創建 token

   登錄 github → 點擊個人頭像 → Settings → 選擇Developer Settings → 創建token

   

   配置選擇

   

   復制創建好的 token

2. 給倉庫設置 token

   回到 electron 工程項目 → Settings → Secrets and variables → Actions

   secret 的名字使用 GH_TOKEN，值就是剛才復制的 token

   

3. 添加 github action 需要的文件

   在 .github/workflows 文件夾下創建 build.yml 文件，內容如下(請自行把注釋刪掉)

   我們這里就用到了上一步配置的 GH_TOKEN

   name: build# 當提交tag時觸發
   on:push:tags:- "*"jobs:build:runs-on: windows-lateststeps:# 步驟1，檢出倉庫代碼- name: Check out Git repositoryuses: actions/checkout@v3# 步驟2，使用node環境- name: Use Node.jsuses: actions/setup-node@v3with:node-version: 18.xcache: 'npm'# 步驟3，執行npm install命令，安裝依賴- name: Install dependenciesrun: npm install# 步驟4，執行打包命令（請自行修改成自己的打包命令）- name: build winrun: npm run build:winenv:GH_TOKEN: ${{ secrets.GH_TOKEN }}# 步驟5，發布release，需要注意包含的3個文件- name: releaseuses: softprops/action-gh-release@v1with:files: |dist/*.exedist/*.exe.blockmapdist/latest.ymldraft: falseenv:GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
   

   看清楚注釋，作業別閉眼抄哈

4. 發布

   提交代碼，推送tag，等待幾分鐘，release 就構建好了

總結

沒啥好總結的

---

參考資料

electron-builder

GitHub Actions