node开发cli工具

·  阅读 182

使用CLI的好处?

减少低级重复劳动、提高开发效率、规范develop workflow

开发目标

实现一个vue-cli类似的功能。大概如下

vue-cli -V 
vue-cli --help 
vue-cli list 
vue-cli init webpack vue2
复制代码

完整代码地址

github.com/yujun96/yj-…

开发yj-cli

  1. 初始化一个项目
1. mkdir yj-cli   
2. cd yj-cli 
3. npm init -y  
复制代码
  1. 新建文件 index.js 注意#! /usr/bin/env node必须要有,放在最前面,告诉操作系统用node脚本执行此文件

2. 在package.json里面加一个bin: yj-cli: 'index.js' 3. 创建链接

cd yj-cli 
npm link 
复制代码

在本地开发npm模块的时候,我们可以使用npm link命令,将npm 模块链接到对应的运行项目中去,方便地对模块进行调试和测试

想了解npm link bin等 看我下一篇文章 
复制代码

juejin.cn/post/688377…
4. 接下来我们就可以测试一下
在终端输入yj-cli 可以发现得到hello world yj-cli工具说明安装成功了。

获取命令行的参数

  1. process (process是node的一个全局变量,详细用法看node官网),这里可以用process.argv获取命令的参数

2. 利用process的效率太低,这里我们使用第三方模块commander

npm i commander
复制代码

我们参照vue-cli vue-cli init webpack vue3-demo然后就可以下载对应的模版 这样我们就能得到yj-cli init 后面的两个参数
参照vue-cli list 可以得到对应的模版

下载模版

  1. 拿到模板名,项目名,我们就可以去下载对应的模版。这里下载我们也需要利用第三方插件 download-git-repo
1. 首先我们去github上创建三个仓库,分别命名tpl-a tpl-b tpl-c 
复制代码

2. 引入download-git-repo    
3. 创建一个object,里面存放三个项目的信息  url代表仓库地址   downloadUrl:是下载地址,这个地址是http://github.com:github的账号/仓库名#分支名(download-git-repo要求downloadurl是这种格式)
复制代码

4. 根据模版名,和项目名进行下载 这里解释一下dowmload的几个参数
 download(downloadUrl,projectName,{ clone:true },(err) => {})
 downloadUrl 下载地址    
 projectName  下载后的项目名
 {clone:true} 是否克隆
 callback: 回调函数
复制代码

2. 完成npm list 3. 我们在命令行输入yj-cli init tpl-a aa就可以发现会多一个aa的文件,这样我们就大功告成

命令行的交互

  1. 我们看到vue-cli init webpack vue3-demo的时候,会让我们去输入项目的名字,版本,作者。那么这个功能我们怎么实现呢?
  2. 在tpl-b下面创建模版

3. 利用第三方插件inquirer 可以实现和命令行的交互npm i inquirer 回调函数answers里面就包含你输入的值 这样我们就可以得到 4. 怎么把我们输入的值插入到模版呢?使用handlebars第三方插件 我们利用node的fs模块,同步读package.json ,然后利用handlebars去替换模版里面的值,最后重写package.json 5. 最后重新执行yj-cli init tpl-b bb 就发现大功告成

增加动画效果

  1. 利用ora第三方插件,增加loading动画

2. 利用chalk第三方插件,改变命令行的字体颜色 3. 利用log-symbols,可以在字体前面加上图标 这样我们一个命令行工具就开发完成

发布到npm

  1. 进入npm官网。注册账号和密码
  2. 在终端输入npm login 输入账号和密码
  3. npm publish // 将cli进行发布
  4. npm i -g yj-cli 这样就成功了。
分类:
前端
标签:
分类:
前端
标签: