介绍

俺为啥要做这个插件：
有一天，项目负责人叫俺打包个前端静态资源并且发wx给他，俺就手动给他打了一个。
但是接下来的日子里，他隔三差五的就叫俺打个包给他，每次都需要 手动压缩文件夹 ，甚是 麻烦 ，俺要偷懒，所以俺决定做个插件帮我做这个事。

实现功能如下：

• 打包后自动压缩文件夹
• 计算打包时间

开发步骤

• 在项目根路径下新增一个 js（即为插件入口）（命名：command-build-zip.js）。
• 在项目根路径下的 package.json 中，新增以下配置：

{"vuePlugins": {"service": ["command-build-zip.js"]}
}

• 安装所需压缩文件夹依赖：compressing

cnpm i -D compressing

• 进入 command-build-zip.js 开发，代码如下：

const fs = require('fs')
const {zip
} = require('compressing')
module.exports = async (api, options) => {const {build} = api.service.commandsconst buildFn = build.fnbuild.fn = async (...args) => {if(!args[0].zip) return buildFn(...args)try {const outputDirPath = api.resolve(options.outputDir)const outputZipPath = `${outputDirPath}.zip`const TIME_LABEL = '📦 打包耗时'console.log('😈 文件路径：', outputZipPath)if (fs.existsSync(outputZipPath)) {fs.unlinkSync(outputZipPath)console.log('👻 删除旧文件成功！')}console.time(TIME_LABEL)await buildFn(...args)await zip.compressDir(outputDirPath, outputZipPath)console.log('👻 文件压缩成功！')console.timeEnd(TIME_LABEL)} catch (error) {console.error('👹 发生错误：', error)}}
}

• 测试命令：

vue-cli-service build --zip

• 效果如下：
  

代码讲解

• 基础结构

module.exports = async (api, options) => {const {build} = api.service.commandsconst buildFn = build.fn// 重写原生build命令build.fn = async (...args) => {await buildFn(...args)}
}

• 加入 删除现有zip文件 功能

const fs = require('fs')
module.exports = async (api, options) => {const {build} = api.service.commandsconst buildFn = build.fnbuild.fn = async (...args) => {try {const outputDirPath = api.resolve(options.outputDir)const outputZipPath = `${outputDirPath}.zip`console.log('😈 文件路径：', outputZipPath)// 判断是否存在，存在才进行删除操作if (fs.existsSync(outputZipPath)) {fs.unlinkSync(outputZipPath)console.log('👻 删除旧文件成功！')}await buildFn(...args)} catch (error) {console.error('👹 发生错误：', error)}}
}

• 加入 压缩文件夹 功能

const fs = require('fs')
const {zip
} = require('compressing')
module.exports = async (api, options) => {const {build} = api.service.commandsconst buildFn = build.fnbuild.fn = async (...args) => {// 判断是否有zip指令参数if(!args[0].zip) return buildFn(...args)try {const outputDirPath = api.resolve(options.outputDir)const outputZipPath = `${outputDirPath}.zip`console.log('😈 文件路径：', outputZipPath)if (fs.existsSync(outputZipPath)) {fs.unlinkSync(outputZipPath)console.log('👻 删除旧文件成功！')}await buildFn(...args)// 进行压缩操作await zip.compressDir(outputDirPath, outputZipPath)console.log('👻 文件压缩成功！')} catch (error) {console.error('👹 发生错误：', error)}}
}

• 加入 计算打包时间 功能

const fs = require('fs')
const {zip
} = require('compressing')
module.exports = async (api, options) => {const {build} = api.service.commandsconst buildFn = build.fnbuild.fn = async (...args) => {if(!args[0].zip) return buildFn(...args)try {const outputDirPath = api.resolve(options.outputDir)const outputZipPath = `${outputDirPath}.zip`// 打印label配置const TIME_LABEL = '📦 打包耗时'console.log('😈 文件路径：', outputZipPath)if (fs.existsSync(outputZipPath)) {fs.unlinkSync(outputZipPath)console.log('👻 删除旧文件成功！')}// 开启计算console.time(TIME_LABEL)await buildFn(...args)await zip.compressDir(outputDirPath, outputZipPath)console.log('👻 文件压缩成功！')// 计算完成console.timeEnd(TIME_LABEL)} catch (error) {console.error('👹 发生错误：', error)}}
}

参考资料

《vue-cli 插件开发文档》
《compressing 依赖文档》