VUE前端实现自动打包成压缩文件

背景

做前端开发的兄弟们都经历过每次开发完成之后发包需要进行打包，然后将打包文件压缩。每次打好包了都得手动压缩一遍，就有点繁琐。今天我们就使用一种命令行自动压缩的方法，让每次编译打包完成之后自动进行压缩，直接解放你的双手。

思路

1、首先我们使用vite进行编译和打包，这时候会在项目根目录下生成dist文件夹，这里面就是我们打完包后的内容。
2、利用node中提供的fs和path来对文件进行读写操作。
3、利用第三方库archiver对dist文件夹进行压缩，并生成压缩文件。
4、在打包指令中加入自定义的压缩逻辑指令。

实现

针对以上几个步骤，我们分别来进行实现

打包

如果你是使用vite构建的项目，在package.json中scripts便签下已经自动为你配置好了build:prod打包命令，只需要执行npm run build:prod就会执行打包动作。如下图：

代码实现

1、首先，你需要安装 archiver 包。

npm install archiver

2、我们需要些一个js文件来执行文件的读写和压缩等操作，新建compress-zip.js文件，逻辑实现如下，已做好注释。

//node内置模块用来读写文件
const fs = require('fs')
//node内置模块用来将多个路径片段拼接成一个完整的路径字符串
const path = require('path')
//第三方压缩库
const archiver = require('archiver')
//自定义压缩文件的名字
const packageName = 'dist'
//__dirname是node中一个特殊的全局变量，用于获取当前执行脚本所在目录的绝对路径‌
//这里../../和../../dist根据你compress-zip.js文件存放路径来决定我这里是根目录vite/plugins/下面
//这里root是项目根目录
const root = path.join(__dirname, '../../')
//这里zipFolder是需要压缩的目录
const zipFolder = path.join(__dirname, '../../dist')
//生成输出流
const output = fs.createWriteStream(path.join(root, `${packageName}.zip`))
//设置压缩等级
const archive = archiver('zip', {zlib: { level: 9 } // Sets the compression level.
})
// 监听文件完成
output.on('close', () => {console.log(archive.pointer() + ' total bytes')console.log('archiver has been finalized and the output file descriptor has closed.')
})
// 结束
output.on('end', function () {console.log('Data has been drained')
})
// 处理警告
archive.on('warning', function (err) {if (err.code === 'ENOENT') {// log warning} else {// throw errorthrow err}
})
// 处理错误
archive.on('error', function (err) {throw err
})
// 将输出流管道到归档对象
archive.pipe(output)
// 读取需要压缩的文件夹，就是我们打包后的根目录的dist文件目录
const fileJob = fs.readdirSync(zipFolder, { withFileTypes: true, encoding: 'utf-8' })
//遍历
fileJob.forEach(job => {if (job.isFile()) {//压缩文件const file = path.join(zipFolder, job.name)archive.append(fs.createReadStream(file), { name: job.name })} else if (job.isDirectory()) {//压缩文件夹const dir = path.join(zipFolder, `${job.name}/`)archive.directory(dir, job.name)}
})
// 完成归档
archive.finalize()

3、添加自定义压缩指令，我们在package.json的scripts中添加一个zip指令，这个指令就是执行我们前面写的compress-zip.js。

/*...*/
"zip": "node vite/plugins/compress-zip.js"
/*...*/

然后在build:prod指令里面增加 && npm run zip如下：

/*...*/
"build:prod": "vite build && npm run zip"
/*...*/

好了，到这里就基本完成了，执行如下命令

npm run build:prod

看到控制台输出如下日志，就打包完成了，可以直接在项目根目录下找到dist.zip。

archiver has been finalized and the output file descriptor has closed.

尾巴

有问题可以给我留言，希望能帮助到有需要的人。如果你喜欢我的文章欢迎给我点赞，谢谢！