如何修改Angular CLI 1.6+项目，实现构建后自动生成ZIP归档

嘿，这个需求我之前刚好实现过，完全能把打包ZIP的步骤整合到Angular CLI的构建流程里，不用单独跑外部脚本。下面是一步步的实现方案，简单又靠谱：

第一步：安装打包依赖 #

我们需要一个Node.js的ZIP处理库，这里推荐archiver，它功能完善且压缩效率不错。打开终端，在项目根目录执行：

npm install archiver --save-dev

第二步：编写自定义打包脚本 #

在项目根目录创建一个名为build-and-zip.js的文件，把下面的代码复制进去——你可以根据自己的需求调整路径和命名规则：

const fs = require('fs');
const archiver = require('archiver');

// 配置打包源目录和输出ZIP路径
const sourceDir = './dist'; // 注意：如果你的CLI输出目录是dist/项目名，要改成对应的路径
const archiveDir = './dist-archive';
const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); // 生成无特殊字符的时间戳
const outputZip = `${archiveDir}/prod-build-${timestamp}.zip`;

// 先确保归档目录存在
if (!fs.existsSync(archiveDir)) {
  fs.mkdirSync(archiveDir, { recursive: true });
}

// 创建ZIP写入流和归档实例
const output = fs.createWriteStream(outputZip);
const archive = archiver('zip', {
  zlib: { level: 9 } // 启用最高压缩级别
});

// 监听打包完成和错误事件
output.on('close', () => {
  console.log(`✅ 生产构建ZIP打包完成！总大小：${(archive.pointer() / 1024 / 1024).toFixed(2)} MB`);
  console.log(`📦 归档文件路径：${outputZip}`);
});

archive.on('error', (err) => {
  console.error('❌ 打包过程出错：', err);
  process.exit(1); // 出错时终止进程，避免误判构建成功
});

// 开始打包：把dist目录下的所有内容直接放进ZIP（不包含dist本身）
archive.pipe(output);
archive.directory(sourceDir, false);
archive.finalize();

第三步：整合到CLI构建流程 #

修改项目根目录的package.json，找到scripts区块，把原来的build命令替换成：

"scripts": {
  "build": "ng build --prod && node build-and-zip.js",
  // 保留其他原有脚本，比如start、test等
}

现在，只要你在终端执行npm run build，CLI会先完成生产环境的构建，只有当构建成功时才会自动执行ZIP打包。如果构建失败，打包脚本不会运行，避免生成无效的归档文件。

额外的小优化 #

• 如果需要自定义ZIP的命名规则（比如加上项目版本号），可以读取package.json里的version字段，修改outputZip的生成逻辑：

  const packageInfo = require('./package.json');
  const outputZip = `${archiveDir}/${packageInfo.name}-v${packageInfo.version}-prod-${timestamp}.zip`;
  

• 如果你想保留每次构建的归档文件，脚本里的时间戳会帮你区分不同版本；如果只想保留最新的，可以在打包前先清空dist-archive目录（用fs.rmSync(archiveDir, { recursive: true, force: true })）。

内容的提问来源于stack exchange，提问作者vitaly-t