前端如何提效增产:记一次cli实践

285 阅读3分钟

一、前言

    预设一个场景:在公司日常开发中,不同项目开发,经常需要复用大量的代码,构建基础的脚手架等,那么该怎么通过优雅的方式来进行ctrl+C/ctrl+V呢?

    构建cli工具,通过敲击命令行来选择生成代码模板就是一个很好的选择。比如vue-cli:

image.png

image.png

二、系统编写

2.1 功能

通过命令行创建项目:

  1. 从git上获取仓库
  2. 选择tag
  3. 下载代码本地

2.2 自定义命令

    vue-cli中,是使用vue create xxx的方式进行创建项目的。这里利用了node项目中的一个小技巧,就是自定义命令。

    node项目中,package.json文件中的bin字段,提供了自定义命令的功能。

    bin字段作为一个命令仓库,这里可以以string或者对象的方式存储命令。当以字符串形式存在的时候,npm link的时候,就是以pacakge.json中的name字段作为自定义命令。如下:npm link之后就是@aliushen/cli xxxx

image.png

    而一般,我比较喜欢使用对象的形式。这样可以设置多个命令(命令行输入cli/show-info会执行对应的文件)。

image.png

那bin字段与npm link的关系是什么?

    简单来说,npm link就是一个链接,将bin中定义的自定义指令,指向特定的文件,并在全局暴露。这样在任何文件夹都能识别该命令。

    当你在package.json中的bin字段里写入命令,进行全局安装或npm link的时候,则会在npm根目录里设置三个以“命令名”命名的文件,这些文件的作用是将解析命令行,将命令指向node_modules中的项目。

image.png

image.png

2.3 自定义指令

所需插件

1、commander

这个插件的作用是创建自定义指令 commander文档

image.png

2、inquirer

这个插件是提供输入交互的,比如用户进行选择之类的。

image.png

3、ora

这个插件是提供命令行loading效果的。

image.png

4、download-git-repo

这个插件作用是:从github上选择仓库/tag,下载到本地指定文件夹。

2.4 coding

2.4.1 添加创建命令

image.png

2.4.2 创建逻辑处理

流程图: image.png

逻辑代码实现: image.png

对应的Creator

code.png

效果

image.png

image.png

三、npm发包

    对应的npm发包,网上教程很多,大致的流程就是:

    npm账号注册-->本地登录(npm login-->输入账号密码、邮箱验证码)-->进入项目npm publish(每次发包注意版本号)

image.png

image.png

四、注意事项

  1. 相关代码ashenBourne/cli

  2. npm包地址@aliushen/cli

  3. 安装包的话,一定要全局安装

  4. 此cli工具用了es module,node低版本并不支持,在制作的时候,可以在package.json中去掉,在代码中使用CommonJS即可。

  5. 看完要点赞评论哦!