技术问题
- 不同的系统/位数打包时，需要手动更改打包配置并删除对应系统的chrome包。
更改代码后，会生成git变动，无法实现CI自动化打包。
手动操作失误时，引起包的体积过大，甚至无法调起chrome。 - 不同的系统，对应的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版本，并且过滤掉无用文件，减少包体积，将繁琐的人为操作转化成简单的一行命令。
