从零开始制做cli工具，快速建立项目脚手架

背景

在工做过程当中，咱们经常会从一个项目工程复制代码到一个新的项目，改项目配置信息、删除没必要要的代码。

这样作的效率比较低，也挺繁琐，更不易于分享协做。

因此，咱们能够制做一个cli工具，用来快速建立一个新项目的脚手架。如vue-cli就是一个很是好用的cli工具。

PS：cli 是一个全局安装的 npm 包。

目标

制做一个cli工具，步骤以下：

一、将咱们的工程模板放到Github上。

若是工程模板有不少个，能够新建一个Organizations，统一放置到这里面。我工程模板有不少个，会统一放Organizations下面。

若是工程模板是放在公司gitlab上，则能够新建一个Group来统一管理。

二、定义控制台命令，包含其参数。

参数通常有 -v 显示包版本， -h 显示帮助信息，create 做为建立项目的命令参数。

如vue-cli的创新项目命令是 vue create [name]。

三、建立一个npm包工程，实现以上command功能。

现在Github已有不少cli工具，能够clone一个做为参考模板。

PS：我作的cli工具将在最下面放出连接。

问题

刚开始要作cli工具时，我头脑里就有几个问题。

一、怎么快速获取到输入的命令行参数？

我相信已有好的npm包能够完成这功能，我不想本身再从头作一遍。

二、怎么作选项选择功能、文字输入？

因为个人工程模板会有不少个，就想作个选项功能，建立工程时能够选择其中一个模板。

三、怎么优雅地输出日志？

console.log虽然能够用，但样式很差看，须要区分info、error日志。

方法

一、怎么快速获取到输入的命令行参数？

yargs模块可以解决如何处理命令行参数。

二、怎么作选项选择功能、文字输入？

inquirer模块可以处理命令行交互。

三、怎么优雅地输出日志？

chalk模块解决字符串样式问题。

具体实现步骤

一、获取模板列表

二、设置模板选项

三、获取模板的tag列表

四、设置tag选项

五、设置项目信息输入

六、下载zip_ball，并复制到目标位置

七、修改项目的信息

具体实现代码

 1 #!/usr/bin/env node
 2 
 3 var yargs = require("yargs");
 4 var info = require("./info.js");
 5 
 6 var args = yargs
 7     .command({
 8         command: "create <name>",
 9         desc: "Create a bingolink template.",
10         builder: {},
11         handler: function(argv) {
12             var projectName = argv.name;
13             //1.获取模板列表
14             info.getTemplates(function(templates){
15                 //2.设置选项
16                 info.showTemplateList(templates, (templateName) => {
17                     var t = templates.find((template) => {
18                         return template.name == templateName;
19                     });
20                     //3.获取标签列表
21                     info.getTags(t.tagsUrl, (tags) => {
22                         //4.设置选项
23                         info.showTagList(tags, (tagName) => {
24                             var tag = tags.find((tag) => {
25                                 return tag.name == tagName;
26                             });
27                             //5.项目信息输入
28                             info.showProjectInputView(projectName, (project) => {
29                                 projectName = project.project_name;
30                                 //6.下载zip_ball，并复制到目标位置
31                                 info.downloadZipball(tag.zipUrl, projectName, () => {
32                                     //7.修改项目的信息
33                                     info.editProjectInfo(project);
34                                 })
35                             })
36                         })
37                     })
38                 })
39             })
40         }
41     })
42     .version() // Use package.json's version
43     .help()
44     .alias({
45         "h": "help",
46         "v": "version"
47     })
48     .strict(true)
49     .demandCommand()
50     .argv;

View Code

上面是入口js的代码，虽然有回调地狱，但还算比较清晰。

其余代码就不贴上，能够clone个人工程下来看。

工程地址：https://github.com/codingforme/bingolink-cli

发布npm包

一、npm adduser

在发布npm包前，须要先登陆npm。

二、npm publish

在工程的根目录，执行这命令便可。

附录

一、npm adduser可能会出现以下的错误。

出现第一错误时，有人说要在Username前加个~号。

我加了，也确实显示登陆成功了，但仍是怎么都发布不上，一直显示User Not Found。

因此我从新注册了一个npmjs账号，而后npm logout，再npm adduser新账号，才发布成功！！！

 

本文为原创文章，转载请保留原出处，方便溯源，若有错误地方，谢谢指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/10847433.html