在开始写[email protected] 版本的时候,希望自己写出来个很完美的脚手架,可是写着写着感觉困难蛮多,时间、技术、知识的限制,有了不想写的念头。幸运的是当时正在读一本书中刚好提到一句话完成好过完美,在80%的时间里表现出80分的状态就很好,这句话启发我以一种追求不完美的方式完成了1.0.0版本,然后又慢慢的迭代优化了2.1.0版本,并计划后续出3.0.0版本。
一、功能说明:
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)增加已有模板list方便使用模板
2)完善2.0.0版本功能,提升用户体验
敬请期待。。。
四、cli编写
1. 使用的node api
commander:负责读取命令,定义当前版本、使用方法、编写四个指令(wlj init等)
inquirer:负责询问,是否需要路由、vuex、UI框架等
download-git-repo:下载git库,使用说明请百度
child_process:主要使用它的exec属性来执行命令
fs:处理文件的内容读取、更改等
ejs:处理某些文件的变量变更
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包的发布、下载、删除、迭代
文章具体的代码可以查看我的git:wlj-cli