Vite 构建压缩插件vite-plugin-pack-orchestrator 为什么又造一个轮子市面上已经有一些 Vite 打包插件比如vite-plugin-zip-pack、vite-plugin-compress等能用但总差那么点意思 — 大多只支持 ZIP功能也比较单一。实际项目里打包这个环节往往没那么简单多种压缩格式️ — ZIP 方便分享给同事TAR.GZ 部署到 Linux 服务器7Z 追求更高压缩比存档归档不同场景需要不同格式文件校验 — 打包后需要 MD5/SHA1 校验值来确认版本一致性尤其是发布给客户的场景灵活命名✏️ — 版本号、时间戳、哈希值文件名里能带的信息越多越好CI/CD 友好 — 流水线里每次构建产物都应该是唯一可追溯的压缩后自动带哈希改名省去人工处理的麻烦写脚本去改也麻烦一些现有插件基本没法同时满足这些所以写了vite-plugin-pack-orchestrator。⚡ 和其他插件有什么不同功能大多数打包插件本插件压缩格式仅 ZIPZIP / TAR / TAR.GZ / 7Z校验和无MD5 / SHA1 / SHA256文件名模板固定命名支持[name][version][timestamp][hash]占位符Hook 扩展无onBeforeBuild/onAfterBuild/onError等钩子文件过滤部分支持includeexcludeglob 模式7Z 支持需要系统安装 7z内置零依赖输出目录控制固定位置archiveOutDir自定义 安装npminstallvite-plugin-pack-orchestrator-D 快速上手最基本的用法两行配置搞定// vite.config.tsimport{defineConfig}fromvite;importorchestratorfromvite-plugin-pack-orchestrator;exportdefaultdefineConfig({plugins:[orchestrator({pack:{outDir:dist,// 要打包的目录默认就是 distformat:zip,// 压缩格式zip | tar | tar.gz | 7zfileName:myapp,// 压缩包文件名},}),],build:{outDir:dist},});执行vite build后会在项目根目录生成myapp.zip。⚙️ 配置项详解pack — 打包配置pack:{outDir:dist,// 要打包的源目录相对于项目根目录默认 distfileName:myapp,// 文件名支持占位符见下方说明format:zip,// 压缩格式zip | tar | tar.gz | 7zcompressionLevel:9,// 压缩级别 0-9默认 9最高压缩率archiveOutDir:./releases,// 压缩包输出目录不写默认项目根目录exclude:[**/*.map],// 排除的文件glob 匹配include:[**/*.js],// 只包含的文件可选不设置则包含全部}fileName 占位符文件名支持以下占位符打包时自动替换占位符说明示例值[name]package.json 中的 namemy-awesome-app[version]package.json 中的 version1.2.0[timestamp]当前时间戳1714012345678[hash]构建内容 MD5 哈希完整 32 位a1b2c3d4e5f6...[hash:8]MD5 哈希前 N 位自定义长度a1b2c3d4// 示例fileName 设为 release-[version]-[timestamp]// 输出release-1.2.0-1714012345678.zip// 示例fileName 设为 [name]-v[version]// 输出my-awesome-app-v1.2.0.zip// 示例fileName 设为 [name]-[hash]// 输出my-awesome-app-a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6.zip// 示例fileName 设为 [name]-[hash:8]// 输出my-awesome-app-a1b2c3d4.zip如果 fileName 不包含扩展名插件会根据 format 自动追加.zip、.tar.gz等后缀。 hooks — 钩子函数onBeforeBuild — 构建前执行在 Vite 开始打包之前执行适合做一些前置清理工作hooks:{onBeforeBuild:async(){// 构建前的一些处理},}onBundleGenerated — bundle 生成后执行Vite bundle 生成后、压缩包创建前执行可以拿到构建产物信息hooks:{onBundleGenerated:(bundle){console.log(生成的文件:,Object.keys(bundle));},}onAfterBuild — 压缩完成后执行核心这是本插件最强大的功能。压缩包创建完成后插件会自动计算 MD5 / SHA1 / SHA256 三种校验和然后传给onAfterBuild。你可以利用这些校验和来重命名压缩包。返回一个新路径和原路径不同插件会自动重命名文件hooks:{onAfterBuild:(path,format,checksums){// path — 当前压缩包的完整路径// format — 压缩格式zip | tar | tar.gz | 7z// checksums — 校验和对象{ md5: string, sha1: string, sha256: string }returnpath;// 返回原路径则不重命名},}实际案例// 案例 1在扩展名前插入 SHA1 短哈希最常用// myapp.zip → myapp-3a7b2c1d.ziponAfterBuild:(path,format,checksums)path.replace(/(\.(?:zip|tar\.gz|tar|7z))$/,-${checksums.sha1.slice(0,8)}$1);// 案例 2用 MD5 全量替换文件名// myapp.zip → a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6.ziponAfterBuild:(path,format,checksums)path.replace(/^.(?\.\w$)/,checksums.md5);// 案例 3追加格式和哈希到原始文件名// myapp.zip → myapp-zip-a1b2c3d4.ziponAfterBuild:(path,format,checksums)path.replace(/(\.\w)$/,-${format}-${checksums.sha256.slice(0,8)}$1);// 案例 4完全自定义文件名用 format 参数自动适配后缀// myapp.zip → release-a1b2c3d4e5f6.ziponAfterBuild:(path,format,checksums)release-${checksums.md5.slice(0,12)}.${format};// 案例 5不重命名只是拿校验和做点其他事比如写入文件onAfterBuild:async(path,format,checksums){fs.writeFileSync(checksums.json,JSON.stringify(checksums));// 不 return 或 return 原路径 不重命名}onError — 出错时执行打包失败时回调适合接入告警通知hooks:{onError:async(error){console.error(打包出错了,error.message);// 可以在这里接入钉钉/企业微信告警},} 为什么说压缩后自动改名对 CI/CD 很重要在持续集成/持续部署的流水线中每次构建的产物都需要是唯一可追溯的。如果压缩包文件名固定叫dist.zip你怎么知道这次构建和上次有什么区别回滚的时候该拿哪个版本本插件通过onAfterBuild钩子拿到校验和后可以自动在文件名中插入哈希值hooks:{onAfterBuild:(path,format,checksums)path.replace(/(\.zip)$/,-${checksums.sha1.slice(0,8)}$1);}构建后输出myapp-1.0.2-3a7b2c1d.zip myapp-1.0.2-7f9e4b2a.zip文件名本身就是指纹一眼就能区分不同构建部署脚本直接按文件名定位版本不需要额外维护版本映射表。回滚也简单 — 找到上一个哈希文件名部署即可。配合[version][timestamp]占位符追溯性更强。 完整示例把前面的配置合在一起就是一个完整的生产级配置// vite.config.tsimport{defineConfig}fromvite;importorchestratorfromvite-plugin-pack-orchestrator;exportdefaultdefineConfig({plugins:[orchestrator({pack:{outDir:dist,// 打包 dist 目录fileName:myapp-[version],// 文件名带版本号format:zip,// ZIP 格式archiveOutDir:./releases,// 输出到 releases 目录exclude:[**/*.map],// 排除 sourcemap},hooks:{// 压缩完成后自动加上 SHA1 哈希onAfterBuild:(path,format,checksums)path.replace(/(\.(?:zip|tar\.gz|tar|7z))$/,-${checksums.sha1.slice(0,8)}$1),// 出错时打印日志onError:(error)console.error(打包失败,error.message),},}),],build:{outDir:dist},});vite build一次搞定不需要额外的打包脚本。插件很轻量代码开源欢迎试用和提建议 npm: vite-plugin-pack-orchestratorGitee: vite-plugin-pack-orchestratorGitHub: wangkai000/vite-plugin-pack-orchestrator