Electron-builder打包和自动更新

这篇具有很好参考价值的文章主要介绍了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 的方式,例如

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

    Electron-builder打包和自动更新

    配置选择

    Electron-builder打包和自动更新

    复制创建好的 token

  2. 给仓库设置 token

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

    secret 的名字使用 GH_TOKEN,值就是刚才复制的 token

    Electron-builder打包和自动更新

  3. 添加 github action 需要的文件

    在 .github/workflows 文件夹下创建 build.yml 文件,内容如下(请自行把注释删掉)

    我们这里就用到了上一步配置的 GH_TOKEN

    name: build
    
    # 当提交tag时触发
    on:
      push:
        tags:
          - "*"
    
    jobs:
      build:
    
        runs-on: windows-latest
    
        steps:
        # 步骤1,检出仓库代码
        - name: Check out Git repository
          uses: actions/checkout@v3
        # 步骤2,使用node环境
        - name: Use Node.js
          uses: actions/setup-node@v3
          with:
            node-version: 18.x
            cache: 'npm'
        # 步骤3,执行npm install命令,安装依赖
        - name: Install dependencies
          run: npm install
        # 步骤4,执行打包命令(请自行修改成自己的打包命令)
        - name: build win
          run: npm run build:win
          env:
            GH_TOKEN: ${{ secrets.GH_TOKEN }}
        # 步骤5,发布release,需要注意包含的3个文件
        - name: release
          uses: softprops/action-gh-release@v1
          with:
            files: |
             dist/*.exe
             dist/*.exe.blockmap
             dist/latest.yml
            draft: false
          env:
            GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
    

    看清楚注释,作业别闭眼抄哈

  4. 发布

    提交代码,推送tag,等待几分钟,release 就构建好了

总结

没啥好总结的


参考资料

electron-builder

GitHub Actions文章来源地址https://www.toymoban.com/news/detail-647112.html

到了这里,关于Electron-builder打包和自动更新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • eletron+react+antd+node开发桌面小程序并打包(electron-packager+electron-builder)

    首先罗列一下项目中用到的技术: electron, react,antd, typescript, node,及打包命令:pkg,electron-packager,electron-builder及child_process实现多进程 需求:开发一个桌面应用,左侧展示视频(需要用到node服务进行rtsp转码),右侧一些获取视频流需要的表单数据。 因为从需求到完成小

    2024年02月11日
    浏览(41)
  • electron-builder 打包 exe 报错 Error output: Plugin not found, cannot call UAC::_

    报错信息: Error: C:Users***AppDataLocalelectron-buildercachensisnsis-3.0.1.13Binmakensis.exe exited with code 1 Output: Command line defined: \\\"APP_ID=com.baidu.app\\\" Command line defined: \\\"APP_GUID=fb00ccb0-0875-5f26-8d91-d8b573c5a860\\\" Command line defined: \\\"PRODUCT_NAME=Baidu\\\" Command line defined: \\\"PRODUCT_FILENAME=Baidu\\\" Command line define

    2024年02月14日
    浏览(30)
  • Electron-Builder Windows系统代码签名

    项目打包签名是两年前做的了,使用Electron-Bulder,打包工具版本迭代较少,倒是electron版本更新飞快,目前官方推荐使用Electron Forge进行打包,后续再对两者进行对比,重新整理现在的实现方案。 在Windows系统中,如果程序没有代码签名证书,或者代码签名授信级别较低时,系

    2024年02月06日
    浏览(35)
  • electron-build打包报错:ERR_ELECTRON_BUILDER_CANNOT_EXECUTE

    electron-build,windows平台打包过程经常报错 : Error: C:UsersM******_C******AppDataLocalelectron-builderCachensisnsis-3.0.3.2Binmakensis.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE at ChildProcess. (H:SaveLanenode_modulesbuilder-utilsrcutil.ts:239:14) at Object.onceWrapper (events.js:422:26) at ChildProcess.emit (events.j

    2024年02月11日
    浏览(39)
  • electron+vue3全家桶+vite项目搭建【25】使用electron-updater自动更新应用

    demo项目地址 electron-updater官网 我们不可能每次发布新的版本都让用户去手动下载安装最新的包,而是应用可以自动下载新包进行覆盖安装,electron-updater就可以非常方便的实现这个功能 引入依赖 实测用pnpm安装打包运行会有问题,这里还是推荐使用npm管理依赖 配置electron-bui

    2024年02月14日
    浏览(69)
  • 打包时,自动更新版本号,清空缓存

    1.创建 addVersion.js 文件 2.修改package.json 文件 serve 执行为测试用的,看版本是否生效 打包更新版本号,只需配置 build 相关指令即可 main.js 文件中添加 清除缓存功能 ok 完成以上执行 查看 package.json 中是否改变 ,结束

    2024年02月02日
    浏览(29)
  • Unity打包与编译,后处理以及自动化等等(持续更新)

    官网地址:https://docs.unity3d.com/cn/2022.1/ScriptReference/index.html C:UserssongzhewenAppDataLocalUnityEditor C:UserssongzhewenAppDataLocalLowlongtuNRJ 然后打包,拉跨,各种失败 我也是碰到了这个错误,用的Unity 2020.3.22。Gradle文件选择的是Unity下载的,应该是6.11的版本。Android SDK下载了31.0.0。但

    2023年04月22日
    浏览(42)
  • tauri在github上进行自动更新打包并发版过程,实战操作避坑

    从网上找了很多很多的文章,结果还是入坑了,一个问题找了一天才解决: Error A public key has been found, but no private key. Make sure to set `TAURI_PRIVATE_KEY` environment variable. 596 ELIFECYCLE  Command failed with exit code 1. 597Error: Process completed with exit code 1. 想要让tauri应用自动升级,就要配置公

    2024年02月15日
    浏览(38)
  • python程序打包成exe实现新版本的自动更新检测及下载

    python使用pyinstaller打包成的exe程序,代码修改重新打包就需要重新发送一次程序,略微麻烦,通过服务器存储新版本打包后的程序,检测和下载通过代码实现。 本文通过FTP局域网服务器的形式完成,使用serv-u软件配置FTP服务器,配置方式可移步下方站内链接 Serv-U配置FTP服务器

    2024年02月14日
    浏览(42)
  • 【electron 4】electron配置打包环境

    window需要:ico mac需要:icns linux需要png 借助:electron-icon-builder 安装: 配置package.json scripts 说明: input:icon.png是我需要引入的图标 output:是我将input引入图标所转换不同大小不同格式的图标输出文件 因为我是已有的项目了,所以这里我只需要安装并引入electron-forge,虽然我进

    2024年04月28日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包