背景 在工作過程中，我們常常會從一個項目工程複製代碼到一個新的項目，改項目配置信息、刪除不必要的代碼。 這樣做的效率比較低，也挺繁瑣，更不易於分享協作。 所以，我們可以製作一個cli工具，用來快速創建一個新項目的腳手架。如vue-cli就是一個非常好用的cli工具。 PS：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({ 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包
1、npm adduser
在發佈npm包前，需要先登錄npm。
2、npm publish
在工程的根目錄，執行這命令即可。
附錄
1、npm adduser可能會出現如下的錯誤。
出現第一錯誤時，有人說要在Username前加個~號。
我加了，也確實顯示登錄成功了，但還是怎麼都發佈不上，一直顯示User Not Found。
所以我重新註冊了一個npmjs帳號，然後npm logout，再npm adduser新帳號，才發佈成功！！！
本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。
本文地址 ：http://www.cnblogs.com/lovesong/p/10847433.html
