『初体验』vue-cli 脚手架插件开发（打包后自动压缩文件夹，计算打包时间）

介绍

俺为啥要做这个插件：
有一天，项目负责人叫俺打包个前端静态资源并且发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.commands
  const buildFn = build.fn
  build.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.commands
  const 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.commands
  const buildFn = build.fn
  build.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.commands
  const buildFn = build.fn
  build.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.commands
  const buildFn = build.fn
  build.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 依赖文档》