從零開始製作cli工具，快速建立專案腳手架
背景
在工作過程中，我們常常會從一個專案工程複製程式碼到一個新的專案，改專案配置資訊、刪除不必要的程式碼。
這樣做的效率比較低，也挺繁瑣，更不易於分享協作。
所以，我們可以製作一個cli工具，用來快速建立一個新專案的腳手架。如vue-cli就是一個非常好用的cli工具。
PS：cli 是一個全域性安裝的 npm 包。
目標
製作一個cli工具，步驟如下：
1、將我們的工程模板放到Github上。
如果工程模板有很多個，可以新建一個Organizations，統一放置到這裡面。我工程模板有很多個，會統一放Organizations下面。
如果工程模板是放在公司gitlab上，則可以新建一個Group來統一管理。
2、定義控制檯命令，包含其引數。
引數一般有 -v 顯示包版本， -h 顯示幫助資訊，create 作為建立專案的命令引數。
如vue-cli的創新專案命令是 vue create [name]。
3、建立一個npm包工程，實現以上command功能。
如今Github已有很多cli工具，可以clone一個作為參考模板。
PS：我做的cli工具將在最下面放出連結。
問題
剛開始要做cli工具時，我頭腦裡就有幾個問題。
1、怎麼快速獲取到輸入的命令列引數？
我相信已有好的npm包可以完成這功能，我不想自己再從頭做一遍。
2、怎麼做選項選擇功能、文字輸入？
由於我的工程模板會有很多個，就想做個選項功能，建立工程時可以選擇其中一個模板。
3、怎麼優雅地輸出日誌？
console.log雖然可以用，但樣式不好看，需要區分info、error日誌。
方法
1、怎麼快速獲取到輸入的命令列引數？
yargs模組能夠解決如何處理命令列引數。
2、怎麼做選項選擇功能、文字輸入？
inquirer模組能夠處理命令列互動。
3、怎麼優雅地輸出日誌？
chalk模組解決字串樣式問題。
具體實現步驟
1、獲取模板列表
2、設定模板選項
3、獲取模板的tag列表
4、設定tag選項
5、設定專案資訊輸入
6、下載zip_ball，並複製到目標位置
7、修改專案的資訊
具體實現程式碼
1 #!/usr/bin/env node
2
3 var yargs = require("yargs");
4 var info = require("./info.js");
5
6 var args = yargs
7.command({
8command: "create <name>",
9desc: "Create a bingolink template.",
10builder: {},
11handler: function(argv) {
12var projectName = argv.name;
13//1.獲取模板列表
14info.getTemplates(function(templates){
15//2.設定選項
16info.showTemplateList(templates, (templateName) => {
17var t = templates.find((template) => {
18return template.name == templateName;
19});
20//3.獲取標籤列表
21info.getTags(t.tagsUrl, (tags) => {
22//4.設定選項
23info.showTagList(tags, (tagName) => {
24var tag = tags.find((tag) => {
25return tag.name == tagName;
26});
27//5.專案資訊輸入
28info.showProjectInputView(projectName, (project) => {
29projectName = project.project_name;
30//6.下載zip_ball，並複製到目標位置
31info.downloadZipball(tag.zipUrl, projectName, () => {
32//7.修改專案的資訊
33info.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包
1、npm adduser
在釋出npm包前，需要先登入npm。
2、npm publish
在工程的根目錄，執行這命令即可。
附錄
1、npm adduser可能會出現如下的錯誤。
出現第一錯誤時，有人說要在Username前加個~號。
我加了，也確實顯示登入成功了，但還是怎麼都發布不上，一直顯示User Not Found。
所以我重新註冊了一個npmjs帳號，然後npm logout，再npm adduser新帳號，才釋出成功！！！
本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。