vue-cli3 之自定义service

先描述一个场景：当我们在本地开发一个移动端的功能时，有时会面临一个困境，即某些原生功能浏览器无法给予我们响应，必须要将代码置身于真机环境，比如微信或自开发的app等。这就需要频繁的进行代码迭代，以进行自测。这样导致一个烦恼，前端要一直打包还要丢到服务器上去。

在线应用比离线应用要好一点的就在于不用进行版本更新，只需要要清掉手机缓存，离线应用要不断的建立版本，上传代码，然后再打开手机测试，有时候只是加一句 console就得进行这些重复操作，挺烦心的。因为最近在搞vue-cli的工具，就想着如何借助于vue-cli3来开发一个内建命令帮助我们减轻负担，花了一天实现了，因此写篇文章来总结一下。

首先因为研发的缘故，我这边是基于我们开发的cli去做的内建命令，所有基于这个cli的项目都能使用，文章最后会讲一下如何在自己的项目里增加自定义命令而不是依赖我们的cli，直接基于vue-cli3即可。

官方定义.png

我们先来看下官方对service插件的定义，vue-cli-service命令，如果是不了解vue-cli3的人，估计乍看也想不起来这是什么东西。当我们打开项目下package.json时，应该会在script对象里看到类似vue-cli-service serve或vue-cli-service build等命令，这里的serve/build就是一个service插件，是vue-cli-service自带的。我们要做的就是自定义一个service从而可以在package.json使用这个命令做一些骚操作。
该怎么自建命令呢？我们先找个官网的例子。

module.exports = (api, options) => {
  api.registerCommand('build', (args) => {
    // ...
  })
}

vue-cli-service的build命令就是这么实现的(删去了具体代码)，api是PluginAPI实例，有一系列的方法，如根据不同环境修改webpack链式配置等，这里只调用了api.registerCommand这个方法向vue-cli-service内部注入额外的命令，serve/build都是这样实现的，我们现在来模仿着写一下。

module.exports = (api, options) => {
   api.registerCommand('uploadApp', {
    description: 'upload local app code to manangement PC',
    usage: 'vue-cli-service uploadApp [options]',
    options: {
      '--mode': 'specify env mode (default: development)'
    },
  },  async function uploadApp(args) {

  })
}

和例子有些不一样，多了个描述对象，问题不大，重点还是在后面的这个异步函数uploadApp。解释下args是什么呢，args最大的作用就是将执行vue-cli-service uploadApp命令时的多余传参从这里暴露给函数。比如 vue-cli-service uploadApp --key dist，args对象里就包含了key:'dist'键值对，可以直接用args.key拿到具体的值，这个也是后面的关键之一。

先来理一理思绪，目的：要实现一个本地命令即完成上传本地zip到服务器的操作 ? 命令注册已实现了，那么问题有以下几点：

1.如何获取要上传的文件包名
2.如何上传文件或者简单点说如何进行接口调用
3.上传的配置项如何传递

带着这些问题，我们一点点来解决。首先我们是基于cli去做的，我们的build输出默认都是输出到dist目录下，所以如果用户能传递文件名，我们就能获取到对应的zip包在dist目录下。之前说的args让我可以解决这个问题，在命令上显示的传递一个 --key这个key对应的值就是文件名，得到这个完整dist/${key}.zip 文件路径名，我们就能通过fs模块获取到文件流，剩下的就是通过FormData上传到服务器上去了。三步走的战略还剩最后一步，如何配置上传的配置项呢？一个项目目录下可能是有多个app的，每个的配置肯定是不一样的，这也是此次命令设计没有考虑交互的原因，本身就是为了减轻负担而做的工具，如果使用还要不断的输入配置那也挺烦的。

回到第一张图，官网对service插件的介绍最后一句提到了我们可以在vue.config.js里配置项目本地的选项来传递给插件。

module.exports = {
  publicPath: "",
  // 不需要生产环境的 source map，将其设置为 false 以加速生产环境构建
  productionSourceMap: false,
  devServer: {
    open: true,
    port: "9595"
  },
  pluginOptions: {
    _base: {
      tenantId: null,
      baseUrl: null,
      name: null,
      password: null,
    },
    dist: {
      menuId: null,    
    }
  }
};

这里我加了个pluginOptions对象，在注册uploadApp命令之前传入了api和options两个参数，options.pluginOptions就能拿到script命令所传入的所有数据。当然还有更简单的，直接放在.env文件里也是没问题的，我们也能通过process.env拿到。只是那里配置对象数据不太友好，而且我觉得放在pluginOptions里比较容易理解和使用。pluginOptions下_base我是希望定义一下标准接口所需要的固定数据，如dist就是和--key一样传递的文件名，也是对应的module模块名，这样我们前期所需的安排都设计好了，可以愉快的撸码了。

主要都是些业务代码，对node有了解的比较容易接受。实现逻辑就是如下图，通过用户名和密码获取到 token令牌，然后查询对应的menuId获取最新的version，然后进行自增，获取zip包上传到服务器得到地址，然后调接口实现版本发布。

image.png

const axios = require('axios');
const chalk = require('chalk')
const JSEncrypt = require('node-jsencrypt')
const FormData = require('form-data');
const fs = require('fs');
const ora = require('ora')

const spinner = ora()

let version = '0.0.0'
let token = ''
let zip = ''
let tenantId = ''
let menuId = ''
let fileName = ''
let baseUrl = ''
let name = ''
let pass = ''

module.exports = (api, options) => {

  api.registerCommand('uploadApp', {
    description: 'upload local app code to manangement PC',
    usage: 'vue-cli-service uploadApp [options]',
    options: {
      '--mode': 'specify env mode (default: development)'
    },
  }, async function uploadApp(args) {

    // 获取传递过来的key即文件module名
    fileName = args.key

    // 获取base信息
    if (options.pluginOptions._base) {
      tenantId = options.pluginOptions._base.tenantId
      baseUrl = options.pluginOptions._base.baseUrl
      name = options.pluginOptions._base.name
      pass = options.pluginOptions._base.password
    }

    Object.keys(options.pluginOptions).forEach(item => {
      if (item === fileName) {
        menuId = options.pluginOptions[item].menuId
      }
    })

    if (baseUrl) {
      spinner.start(['uploading'])
      // 不用用户做任何操作 
      const tokenData = await getToken();
      // 赋值token
      token = tokenData.access_token;
      const versionData = await getVersion();

      // 列表不为空 则版本自增
      if (versionData.content.length) {
        let versionNow = versionData.content[0].menuVersion;
        let versionList = versionNow.split('.')
        // 先转数值型再加1
        versionList[2] = (+versionList[2]) + 1
        version = versionList.join('.')
      }

      console.log(chalk.green('新建的版本是:' + version))

      // 上传子应用包到服务器获取地址
      zip = await uploadZip()

      const res = await createVersion();

      console.log(chalk.green(res.message))

      spinner.succeed()


    } else {
      console.log(chalk.res('请按规则配置vue.config.js'))
    }




  })
};

const getToken = () => {
  let form = new FormData();
  return new Promise((resolve, reject) => {
    axios.create({
      headers: form.getHeaders()
    }).post(url, form).then(res => {
      resolve(res.data)
    }).catch(error => {
      reject()
    });
  })
}

const getVersion = () => {
}


const uploadZip = () => {
  let form = new FormData();
  form.append('file', fs.createReadStream(`dist/${fileName}.zip`))

  let headers = form.getHeaders(); //这个不能少
  headers.Authorization = `bearer ${token}`; //自己的headers属性在这里追加

  return new Promise((resolve, reject) => {
    axios.create({
      headers,
    }).post(url, form).then(res => {
      resolve(res.data)
    }).catch(error => {
      reject()
    });

  })
}

const createVersion = () => {

}

module.exports.defaultModes = {
  build: 'development'
}

部分具体的接口调用部分没有显示，只将重点的代码贴出来来。要强调一点的是在 node中使用new FormData()是会报错FormDate is undefined，因为node中确实没有FormData，要引入form-data模块来实现FormData的功能，还有使用axios上传formData数据需要设置header为form.getHeader()，自定义的headers可以挂载在这个对象之后。测试了使用node的http和request都不是很ok，最后还是选择了前端比较熟悉的axios，只是使用有点不一样，具体使用可以查看上面的uploadZip方法。这样一个service插件就实现了，这里实现的是离线应用上传到服务器上，后面会考虑下在线的应用如何直接通过密钥上传到服务器上。

到此，在自己的packge.json里的script下加上一句命令"uploadDist": "cross-env vue-cli-service uploadApp --key dist"，使用yarn uploadDist就可以直接将本地的zip包直接上传到服务器上并建立版本，再也不用重复的操作了。

最后来讲一下，如何在标准的vue-cli 3项目下建立自己的命令，命令文件和上面的代码可以是一致的，取名vue-cli-plugin-uploadApp.js, 放在项目根目录，然后在package.json下注入如下代码

"vuePlugins": {
      "service": [
        "./vue-cli-plugin-uploadApp"
      ]
   }

这样就同样可以在自己的项目下使用这个vue-cli-service uploadApp了。如果看过我上一篇文章手撸脚手架的人应该对Commander这个库比较熟悉，我们也可以基于Commander来做这样一个命令文件，但是这个就和vue-cli没什么关系了，只是单纯的写一个node脚本，有兴趣的人也可以去实现一下。