桌面端多系统一键打包

技术问题

1. 不同的系统/位数打包时，需要手动更改打包配置并删除对应系统的chrome包。
   更改代码后，会生成git变动，无法实现CI自动化打包。
   手动操作失误时，引起包的体积过大，甚至无法调起chrome。
2. 不同的系统，对应的puppeteer版本是不一样的。puppeteer的版本不同会导致相关依赖变化。在更换系统包打包时，需要更换puppeteer的版本，并重新安装依赖。耗时较长且有可能会导致依赖异常。

技术方案

针对不同系统/位数动态生成yml打包文件，打包结束之后，删除该配置文件。
添加npm依赖包别名，在动态yml文件中，过滤掉不需要的版本。
方案细节（以win10 x64为例）
添加npm 执行命令

"build:win10:x64": "electron-vite build --mode debug_win10_x64 && node ./scripts/create-builder.js debug_win10_x64",
"dist:win10:x64": "npm run build:win10:x64:prod && set ELECTRON_BUILDER_OUTPUT_DIR=dist/x64 && electron-builder --win --x64 --publish never && npm run deleteyml",
"deleteyml": "node ./scripts/delete-builder.js"

添加依赖包别名

"puppeteer": "^18.2.1",
"puppeteer21": "npm:puppeteer@^21.11.0",

添加模板文件

files:
  - "!**/.vscode/*"
  - "!src/*"
  - "!electron.vite.config.{js,ts,mjs,cjs}"
  - "!{.eslintignore,.eslintrc.cjs,.eslintrc.js,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md,.gitlab-ci.yml,build.py,iconfont.config.ts}"
  - "!{.env,.env.*,.npmrc,pnpm-lock.yaml}"
  - "!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}"
  - "!scripts/*"
  - "!node_modules/puppeteer-core/.local-chromium/*"
<% files.forEach(file => { %>
  - "<%= file %>"
<% }) %>
asarUnpack:
<% asarUnpack.forEach(unpackItem => { %>
  - "<%= unpackItem %>"
<% }) %>
publish:
  provider: generic
  url: <%= publish.url %>

针对不同的系统位数，赋值给模板yml文件

const fs = require('fs');
const ejs = require('ejs');
const path = require('path');
// 获取命令行参数
const argvs = process.argv[2].split('_');
const currentSys = argvs[1];
// 读取环境变量和动态数据
const asarUnpack = ['resources/*', 'chrome/'+currentSys ];
const publish = {
  provider: 'generic',
  url: 'https://upload.easypost.com.hk/'+currentSys+'/${arch}',
};
const appNames = {
  currentSys: currentSys,
  env: argvs[0],
};
const files = [];
// 过滤掉不属于该版本的chrome包
if(currentSys === 'win10'){
  files.push('!chrome/win7');
}

// 读取 YAML 模板文件

const templatePath = path.join(__dirname, './template-builder.yml');
const template = fs.readFileSync(templatePath, 'utf-8');

// 使用 EJS 渲染模板

const renderedYAML = ejs.render(template, { asarUnpack, files,appNames,publish});

// 将渲染后的 YAML 写入文件

const outputPath = path.join(__dirname, '../electron-builder.yml');
fs.writeFileSync(outputPath, renderedYAML, (err) => {
  if (err) {
    console.error('electron-builder:Error writing file:', err);
  } else {
    console.log('electron-builder:File written successfully.');
  }
});

技术成效

实现一键打包：统一管理了升级地址、chrome版本、pupputeer版本，并且过滤掉无用文件，减少包体积，将繁琐的人为操作转化成简单的一行命令。