日常开发中，我们更多时间专注在业务上的开发，拿到一套开箱即用的模版项目就开始开发了，cli到底做了什么，大家也一定有好奇，今天的分享就是手把手教实现自己的cli并发布到npm。
cli作为一个工具，有它的通用特点和个性化特点，这次的分享只是抛砖引玉，内容基础，适合入⻔，且有实践意义，实操一下会发现小半天的功夫就能写一个自己的cli，再花个小半天的功夫就可以把cli发布到npm。后续我们可以根据自己项目的需要添加丰富的选项和设定功能，同时可以借鉴vue、react的脚手架或者市面上现成的cli的设计思路来开发或者完善自己的cli。
在开始写wlj-cli@1.0.0 版本的时候，希望自己写出来个很完美的脚手架，可是写着写着感觉困难蛮多，时间、技术、知识的限制，有了不想写的念头。幸运的是当时正在读一本书中刚好提到一句话完成好过完美，在80%的时间里表现出80分的状态就很好，这句话启发我以一种追求不完美的方式完成了1.0.0版本，然后又慢慢的迭代优化了2.0.0版本，并计划后续出3.0.0版本。如今3.0.0版本已出,现在来更新文档
前序
vue-cli搭建项目简单回忆
现在开始自己的wlj-cli旅程
一、功能说明：
1）5个命令
wlj 现有命令说明
wlj add 添加模板
wlj del 删除模板
wlj list 现有模板列表
wlj init 可选择是否为模板配置路由、UI框架、css预处理语言、vuex的进行选择，同时支持 wlj init <模板名称><项目名称>这种格式的命令来下载已经添加到 模板 list 中的模板
2）添加的模板需要上传到git才可添加
二、使用方式
a) 安装：npm i wlj-cli -g
b）现有命令
Commands:
add Add a new template
del Delete a template
list List all the templates
init Init a based project
Options:
-h, --help output usage information
-V, --version output the version number
c) 卸载：npm uninstall wlj-cli -g
d) 若安装过之前旧版本，在安装新版时需要先通过 npm uninstall wlj-cli -g 卸载旧版本
三、版本介绍
1.0.0-2.0.0版本: 实现初始化并下载模版、添加模版、删除模版、查看现有模版
3.0.0版本: 可选vue2.0或者3.0版本, 在2.0.0的基础上新增vue+ts+elementPlus后台系统模版
四、整体架构整理
1、流程图
2、整体结构
很多cli都提供了相当丰富的选项和设定功能，其本质是从远程仓库把不同的模版拉取到本地。所以搭建脚手架首先是建立不同的样板项目，然后脚手架根据用户的指令引用样板项目并生成实际项目。样板项目可以内置在脚手架当中，也可以部署在远程仓库。
模版:就是一个项目的样板，包含项目的完整结构和信息。
模版的信息都存放在一个叫做templates.json的文件当中。
用户可以通过命令行对templates.json进行添加、删除、罗列的操作。
通过选择不同的模版，从远程仓库把相应的模板拉取到本地，完成项目的搭建。
3、创建步骤
五、cli编写案例
1. 使用的node api
commander：负责读取命令，定义当前版本、使用方法、编写四个指令（wlj init等）
inquirer：负责询问，是否需要路由、vuex、UI框架等
download-git-repo：下载git库，使用说明请百度
child_process：主要使用它的exec属性来执行命令
fs：处理文件的内容读取、更改等
ejs：处理某些文件的变量变更
org: 用于加载时显示动画操作
搭建执行命令的环境步骤
问:为什么安装脚手架后vue-cli，create-react-app可以使用类似vue create xxx之类的命令?
答: bin
1)npm init 生成package.json文件
2)package.json 文件自定义bin属性，创建命令
3)创建bin执行的js文件，解析命令，告诉package.json,我的bin叫wlj,它可执行的文件路径是bin/wlj.js
4)tips: 必须要打成全局包才可以使用该命令bin中定义的命令, 打成全局包的命令:npm install -g 或者 npm link
2. 步骤
第一步。解析命令
在bin/wlj中引入commander，并且声明 add、del、list、init命令，commander会在同级目录中寻找wlj-add、wlj-del、wlj-list、wlj-init文件。
第二步，询问
以wlj-add命令举例
有了第一步的解析后，我们可以在wlj-add文件中写add命令相关的内容，这里我们再抽象add文件到command目录下，以便更好的分离职责，bin文件只负责解析命令就好了
下面我们看一下command目录下的add文件，如何实现询问
inquirer提供prompt函数来实现询问，其参数为数组，问询顺序将按照数组的顺序来进行
第三步，下载仓库
核心代码如下：
这里需要注意的是url是git的用户名名称/项目名称
第四步，进行npm install
这一步的核心是使用nodejs提供的child_process中的exec方法执行方法来实现，exec帮助我们在命令行中执行shell命令，exec有对应的回调方法让我们来判断命令执行是否成功，核心代码如下:
是不是很简单呢，看起来简单的东西还是多动手写写比较好
第五步，调试、发布
npm link // 本地调试
npm publish // 发布
通过npm link命令，即可以在命令行工具测试你的cli了，注意在package.json的bin字段中定义好了入口命令文件
具体怎么发布npm包，以及npm包的删除、迭代、废弃可以查看我的另一篇关于npm包的文章：npm包的发布、下载、删除、迭代
六、体验
wlj init 命令最后生成的文件目录如下:
拉取的模版
七、拓展
关于npm发布可参考我的另一文章:
npm包的发布、下载、删除、迭代(https://www.jianshu.com/p/284bc3a7e036)
我的git源码：wlj-cli (https://github.com/wangAlisa/wlj-cli)
我的npm地址: wlj-cli (https://www.npmjs.com/package/wlj-cli)
