Electron-builder打包和自动更新

萧晓亮

Electron-builder打包和自动更新

前言

文本主要讲述如何为 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 的方式，例如

1. electron-builder --win --config

复制代码

以下介绍都基于 electron-builder.yml 的方式，如需使用 package.json，请自行翻阅文档转换
详见：CLI
NSIS安装引导

electron-builder 生成的安装包默认是一键安装，也就是无法选择安装路径等。这时候就需要用到 NSIS 了（注意：NSIS 只适用于 Window 平台）
只需要修改 electron-builder.yml 即可，我常用的配置如下：

1. nsis:
2.   oneClick: false # 创建一键安装程序还是辅助安装程序（默认是一键安装）
3.   allowElevation: true # 是否允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序 （仅作用于辅助安装程序）
4.   allowToChangeInstallationDirectory: true # 是否允许修改安装目录 （仅作用于辅助安装程序）
5.   createStartMenuShortcut: true # 是否创建开始菜单快捷方式
6.   artifactName: ${productName}-${version}-${platform}-${arch}.${ext}
7.   shortcutName: ${productName}
8.   uninstallDisplayName: ${productName}
9.   createDesktopShortcut: always

复制代码

详见：NsisOptions
自动更新

结合 github 的 release 配置自动更新
代码修改

• 修改 electron-builder.yml
  以 dubbo 仓库举例子：https://github.com/apache/dubbo
  1. # 仓库配置
  2. publish:
  3.   provider: github # 选择github平台
  4.   owner: apache # github用户名
  5.   repo: dubbo # github仓库名
  6. # 更新日志
  7. releaseInfo:
  8.   releaseNotes: |
  9.    这是更新日志
  10.    测试测试

  复制代码
• 工程代码修改
  我是基于 TypeScript 的写法，如果需要 JavaScript 的写法，请参考文档：Auto-Update 和 官方案例
  
  
  
  • 安装 electron-updater
    1. npm install electron-updater

    复制代码
  • 主线程添加自动更新代码
    1. import { autoUpdater, UpdateInfo } from 'electron-updater';
    3. // dev-start, 这里是为了在本地做应用升级测试使用，正式环境请务必删除
    4. if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    5.   autoUpdater.updateConfigPath = path.join(__dirname, '../../dev-app-update.yml');
    6. }
    7. Object.defineProperty(app, 'isPackaged', {
    8.   get() {
    9.     return true;
    10.   }
    11. });
    12. // dev-end
    14. // 触发检查更新(此方法用于被渲染线程调用，例如页面点击检查更新按钮来调用此方法)
    15. ipcMain.on('check-for-update', () => {
    16.   logger.info('触发检查更新');
    17.   autoUpdater.checkForUpdates();
    18. });
    20. // 设置自动下载为false(默认为true，检测到有更新就自动下载)
    21. autoUpdater.autoDownload = false;
    22. // 检测下载错误
    23. autoUpdater.on('error', (error) => {
    24.   logger.error('更新异常', error);
    25. });
    27. // 检测是否需要更新
    28. autoUpdater.on('checking-for-update', () => {
    29.   logger.info('正在检查更新……');
    30. });
    31. // 检测到可以更新时
    32. autoUpdater.on('update-available', (releaseInfo: UpdateInfo) => {
    33.   logger.info('检测到新版本，确认是否下载');
    34.   const releaseNotes = releaseInfo.releaseNotes;
    35.   let releaseContent = '';
    36.   if (releaseNotes) {
    37.     if (typeof releaseNotes === 'string') {
    38.       releaseContent = <string>releaseNotes;
    39.     } else if (releaseNotes instanceof Array) {
    40.       releaseNotes.forEach((releaseNote) => {
    41.         releaseContent += `${releaseNote}\n`;
    42.       });
    43.     }
    44.   } else {
    45.     releaseContent = '暂无更新说明';
    46.   }
    47.   // 弹框确认是否下载更新（releaseContent是更新日志）
    48.   dialog
    49.     .showMessageBox({
    50.       type: 'info',
    51.       title: '应用有新的更新',
    52.       detail: releaseContent,
    53.       message: '发现新版本，是否现在更新？',
    54.       buttons: ['否', '是']
    55.     })
    56.     .then(({ response }) => {
    57.       if (response === 1) {
    58.         // 下载更新
    59.         autoUpdater.downloadUpdate();
    60.       }
    61.     });
    62. });
    63. // 检测到不需要更新时
    64. autoUpdater.on('update-not-available', () => {
    65.   logger.info('现在使用的就是最新版本，不用更新');
    66. });
    67. // 更新下载进度
    68. autoUpdater.on('download-progress', (progress) => {
    69.   logger.info('下载进度', progress);
    70. });
    71. // 当需要更新的内容下载完成后
    72. autoUpdater.on('update-downloaded', () => {
    73.   logger.info('下载完成，准备更新');
    74.   dialog
    75.     .showMessageBox({
    76.       title: '安装更新',
    77.       message: '更新下载完毕，应用将重启并进行安装'
    78.     })
    79.     .then(() => {
    80.       // 退出并安装应用
    81.       setImmediate(() => autoUpdater.quitAndInstall());
    82.     });
    83. });

    复制代码
    上面的代码只是主线程的，还需要渲染线程和页面配置
    
  
  

发布 release

• 创建 token
  登录 github → 点击个人头像 → Settings → 选择Developer Settings → 创建token
  
  
  配置选择
  
  
  复制创建好的 token
  
• 给仓库设置 token
  回到 electron 工程项目 → Settings → Secrets and variables → Actions
  secret 的名字使用 GH_TOKEN，值就是刚才复制的 token
  
  
  
• 添加 github action 需要的文件
  在 .github/workflows 文件夹下创建 build.yml 文件，内容如下(请自行把注释删掉)
  我们这里就用到了上一步配置的 GH_TOKEN
  1. name: build
  3. # 当提交tag时触发
  4. on:
  5.   push:
  6.     tags:
  7.       - "*"
  9. jobs:
  10.   build:
  12.     runs-on: windows-latest
  14.     steps:
  15.     # 步骤1，检出仓库代码
  16.     - name: Check out Git repository
  17.       uses: actions/checkout@v3
  18.     # 步骤2，使用node环境
  19.     - name: Use Node.js
  20.       uses: actions/setup-node@v3
  21.       with:
  22.         node-version: 18.x
  23.         cache: 'npm'
  24.     # 步骤3，执行npm install命令，安装依赖
  25.     - name: Install dependencies
  26.       run: npm install
  27.     # 步骤4，执行打包命令（请自行修改成自己的打包命令）
  28.     - name: build win
  29.       run: npm run build:win
  30.       env:
  31.         GH_TOKEN: ${{ secrets.GH_TOKEN }}
  32.     # 步骤5，发布release，需要注意包含的3个文件
  33.     - name: release
  34.       uses: softprops/action-gh-release@v1
  35.       with:
  36.         files: |
  37.          dist/*.exe
  38.          dist/*.exe.blockmap
  39.          dist/latest.yml
  40.         draft: false
  41.       env:
  42.         GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

  复制代码
  看清楚注释，作业别闭眼抄哈
  
• 发布
  提交代码，推送tag，等待几分钟，release 就构建好了
  

总结

没啥好总结的
参考资料
electron-builder
GitHub Actions

来源:https://www.cnblogs.com/konghuanxi/p/17629100.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！