背景:
- 创建一个页面(以管理后台为例),至少需要一个vue,一个api,一个router,也就是说我起码得操作鼠标和键盘3次以上,想想都觉得麻烦。
- 公司的资源是上传到公司的cdn服务器的,每次资源更新,如果自己去同步的话,按照以前的逻辑,需要打开存储待更新资源的git仓库,然后把别人的新资源拷贝下来,再把资源通过脚本同步到公司级别cdn。
- 跟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做了几件事
- 根据传进来的resouce和version,通过cdnjs.cloudflare.com/ajax/libs去嗅探该资源的版本。
- 根据获取到的版本,列出所有可以同步的资源版本以供使用者选择。
- 使用者选择版本后,先去公司级cdn库寻找是否有该资源,有则提示,并且结束程序,没有则继续。
- 创建临时目录,把待同步的资源先下载下来,并且压缩成zip文件。
- 根据以前写好的脚本,上传zip文件,同步公司级别CDN。
- 同步完成后删除临时目录,并返回该资源所有可访问地址(因为资源会包括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
,只需五秒钟,瞬间解放生产力。
然后上司提了几个意见:
- 希望有界面可以选择需要更新的资源
- 列出所有可选择的版本
- 更新完资源版本,如果能同步修改饮用该资源的文件就完美了。
你这点钱,我很难替你办事啊。 -- 胡适
最后再说说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导致的。
安逸。