【前端工具】使用 Node.js 脚本实现项目打包后自动压缩

在前端项目开发中，构建完成后通常需要将生成的 dist 目录打包成压缩文件，方便发版、备份或上传到服务器。本文将分享一个基于 Node.js 的简单脚本，自动读取项目名，将 dist 文件夹压缩成 ZIP 文件，简化打包流程。

项目环境及版本

技术栈：Vue2（2.6.12）、ES6

运行环境：Node（v14.17.6）、Npm（6.14.15）

一、实现步骤

创建 build-zipper.js 文件

读取项目名：通过读取项目根目录的 package.json 文件，获取 name 字段作为压缩包名称，避免硬编码。

js 复制代码

const packageJson = require('./package.json')
const projectName = packageJson.name || 'project'

定义压缩目录和输出路径：使用 path.resolve 获取绝对路径，确保跨平台兼容。

js 复制代码

const distPath = path.resolve(__dirname, 'dist')
const outputPath = path.resolve(__dirname, `${projectName}.zip`)

压缩函数实现：创建写入流 output，指向输出 ZIP 文件。创建 archiver 实例，指定压缩格式为 zip，压缩级别为 9（最高）。监听写入流的 close 事件，打印压缩完成信息。监听 archiver 的 error 事件，捕获压缩错误。使用 archive.directory 将整个目录压缩，第二个参数 false 表示不包含根目录名。调用 archive.finalize() 开始压缩。

js 复制代码

const output = fs.createWriteStream(outPath)
const archive = archiver('zip', { zlib: { level: 9 } })

return new Promise((resolve, reject) => {
    output.on('close', () => {
      console.log(`压缩完成，文件大小：${archive.pointer()} 字节`)
      resolve()
    })

    archive.on('error', (err) => reject(err))

    archive.pipe(output)
    archive.directory(sourceDir, false)
    archive.finalize()
  })

调用压缩函数并处理结果：使用 Promise 处理异步流程，成功时打印完成提示，失败时打印错误并退出进程。

js 复制代码

zipDirectory(distPath, outputZipPath)
  .then(() => {
    console.log(`打包并压缩完成！`)
  })
  .catch((err) => {
    console.error('压缩失败:', err)
    process.exit(1)
  })

完整代码：

js 复制代码

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

/** 读取 package.json 获取项目名 */
const packageJson = require('./package.json')
const projectName = packageJson.name || 'project'

/** 需要压缩的文件夹 */
const distPath = path.resolve(__dirname, 'dist')
/** 输出的 zip 文件路径 */
const outputPath = path.resolve(__dirname, `${projectName}.zip`)

/** 压缩文件夹 */
function zipDirectory(sourceDir, outPath) {
  const output = fs.createWriteStream(outPath)
  const archive = archiver('zip', { zlib: { level: 9 } })

  return new Promise((resolve, reject) => {
    output.on('close', () => {
      console.log(`压缩完成，文件大小：${archive.pointer()} 字节`)
      resolve()
    })

    archive.on('error', (err) => reject(err))

    archive.pipe(output)
    archive.directory(sourceDir, false)
    archive.finalize()
  })
}

zipDirectory(distPath, outputPath)
  .then(() => {
    console.log(`打包并压缩完成！`)
  })
  .catch((err) => {
    console.error('压缩失败:', err)
    process.exit(1)
  })

脚本的运行使用

修改package.json文件中的scripts构建命令行，添加 && node build-zipper.js

js 复制代码

"build": "vue-cli-service build && node build-zipper.js",

在终端运行该命令行npm run build

js 复制代码

npm run build

二、实现效果

三、注意事项

archiver需指定版本："archiver": "^5.3.0"，由于项目Node版本为14.17.6，若archiver版本过高，会导致运行脚本报错：Cannot find module 'node:url'。
压缩包输出目录可以按需修改，如输出至电脑桌面：

js 复制代码

const os = require('os')

const desktopDir = path.join(os.homedir(), 'Desktop')
const outputZipPath = path.join(desktopDir, `${projectName}.zip`)

兼容性增强：增加 Node.js 版本检测，确保环境支持。

总结

本文介绍的 Node.js 脚本，利用 archiver 实现了自动读取项目名并压缩 dist 目录的功能，简单高效，适合日常项目打包需求。通过自动化脚本，减少了手动操作，提高了构建发布的效率和规范性。

大家可根据项目需求，灵活调整脚本，打造符合自己团队的自动化构建流程！^-^