结合公司业务开发的command cli

425 阅读2分钟

背景:

  1. 创建一个页面(以管理后台为例),至少需要一个vue,一个api,一个router,也就是说我起码得操作鼠标和键盘3次以上,想想都觉得麻烦。
  2. 公司的资源是上传到公司的cdn服务器的,每次资源更新,如果自己去同步的话,按照以前的逻辑,需要打开存储待更新资源的git仓库,然后把别人的新资源拷贝下来,再把资源通过脚本同步到公司级别cdn。
  3. 跟cli无关,但是也能反映问题,vue文件中,公司没有自定义好snippet,导致每次新建一个文件,都得复制粘贴,或者一次一次的敲(template,script,css),简直不要台麻烦了。

如果一件事你发现需要复制粘贴,做两次以上的,那请考虑封装抽象。 -- 鲁迅

用到的npm包:

  • fs-extra 更便捷的读写文件
  • commander 酷炫的读取命令行参数,谁用谁知道
  • inquirer 交互式命令行
  • chalk 彩色输出
  • ora 有趣的进度输出
  • shelljs 封装好的shell便捷操作

公司的路由业务需要重构,所以第一点暂时先埋个坑。

那么先做第二点,废话不多说了,贴代码:

program
  .command('update <resource> <version>')
  .alias('u')
  .description('update Element-UI Version')
  .action(function (resource, version) {
    // 匹配版本号
    if (!/^\d+(\.\d+){2}$/.test(version)) {
      throw new Error('not a suitable version, usually looks like x.y.z');
    }
    // 执行更新版本的逻辑
    updateVersion(resource, version);

  });

updateVersion.js做了几件事

  1. 根据传进来的resouce和version,通过cdnjs.cloudflare.com/ajax/libs去嗅探该资源的版本。
  2. 根据获取到的版本,列出所有可以同步的资源版本以供使用者选择。
  3. 使用者选择版本后,先去公司级cdn库寻找是否有该资源,有则提示,并且结束程序,没有则继续。
  4. 创建临时目录,把待同步的资源先下载下来,并且压缩成zip文件。
  5. 根据以前写好的脚本,上传zip文件,同步公司级别CDN。
  6. 同步完成后删除临时目录,并返回该资源所有可访问地址(因为资源会包括min,map等文件)。
    await downloadResourceByVersion({
        temp: TEMP,
        version,
        resource
    });
    // 传文件到cdn服务器
    await syncCDN(TEMP, `zcs_static/${resource}`);
    // 删除临时目录
    await fs.remove(TEMP);

最后由以前的复制粘贴,一顿操作,可能得五分钟,变成一句话:xxx-cli u vue 2.6.10,只需五秒钟,瞬间解放生产力。

然后上司提了几个意见:

  1. 希望有界面可以选择需要更新的资源
  2. 列出所有可选择的版本
  3. 更新完资源版本,如果能同步修改饮用该资源的文件就完美了。

你这点钱,我很难替你办事啊。 -- 胡适

最后再说说snippet,只针对vscode用户,其实文章之前就写过了,再让自己温习一遍:

{
  "VueTemplate": {
    // "scope": "javascript,typescript",
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div class='${1:container}'>\n",
      "  </div>",
      "</template>\n",
      "<script>",
      "export default {",
      "  name: '${2:zcs-vue}',",
      "  props: {},",
      "  data() {",
      "    return {};",
      "  },",
      "  computed: {},",
      "  created() {},",
      "  methods: {},",
      "};",
      "</script>\n",
      "<style scoped lang='postcss'>\n",
      "</style>\n",
    ],
    "description": "Create vue template"
  }
}

再也不用写什么template,script,css才能变成一个完整的vue文件了,只需

输出vue,然后回车:

不要在意红叉,那只是演示,在一个vue文件里出现了两个根template导致的。

安逸。