一、前言
预设一个场景:在公司日常开发中,不同项目开发,经常需要复用大量的代码,构建基础的脚手架等,那么该怎么通过优雅的方式来进行ctrl+C/ctrl+V呢?
构建cli工具,通过敲击命令行来选择生成代码模板就是一个很好的选择。比如vue-cli:
二、系统编写
2.1 功能
通过命令行创建项目:
- 从git上获取仓库
- 选择tag
- 下载代码本地
2.2 自定义命令
vue-cli中,是使用vue create xxx的方式进行创建项目的。这里利用了node项目中的一个小技巧,就是自定义命令。
node项目中,package.json文件中的bin字段,提供了自定义命令的功能。
bin字段作为一个命令仓库,这里可以以string或者对象的方式存储命令。当以字符串形式存在的时候,npm link的时候,就是以pacakge.json中的name字段作为自定义命令。如下:npm link之后就是@aliushen/cli xxxx
而一般,我比较喜欢使用对象的形式。这样可以设置多个命令(命令行输入cli/show-info会执行对应的文件)。
那bin字段与npm link的关系是什么?
简单来说,npm link就是一个链接,将bin中定义的自定义指令,指向特定的文件,并在全局暴露。这样在任何文件夹都能识别该命令。
当你在package.json中的bin字段里写入命令,进行全局安装或npm link的时候,则会在npm根目录里设置三个以“命令名”命名的文件,这些文件的作用是将解析命令行,将命令指向node_modules中的项目。
2.3 自定义指令
所需插件
1、commander
这个插件的作用是创建自定义指令 commander文档
2、inquirer
这个插件是提供输入交互的,比如用户进行选择之类的。
3、ora
这个插件是提供命令行loading效果的。
4、download-git-repo
这个插件作用是:从github上选择仓库/tag,下载到本地指定文件夹。
2.4 coding
2.4.1 添加创建命令
2.4.2 创建逻辑处理
流程图:
逻辑代码实现:
对应的Creator
效果
三、npm发包
对应的npm发包,网上教程很多,大致的流程就是:
npm账号注册-->本地登录(npm login-->输入账号密码、邮箱验证码)-->进入项目npm publish(每次发包注意版本号)
四、注意事项
-
相关代码ashenBourne/cli
-
npm包地址@aliushen/cli
-
安装包的话,一定要全局安装
-
此cli工具用了es module,node低版本并不支持,在制作的时候,可以在package.json中去掉,在代码中使用CommonJS即可。
-
看完要点赞评论哦!