從零開始製做cli工具，快速建立項目腳手架

時間 2019-11-13

標籤開始製做 cli 工具快速建立項目腳手架简体版

原文原文鏈接

背景html

在工做過程當中，咱們經常會從一個項目工程複製代碼到一個新的項目，改項目配置信息、刪除沒必要要的代碼。vue

這樣作的效率比較低，也挺繁瑣，更不易於分享協做。node

因此，咱們能夠製做一個cli工具，用來快速建立一個新項目的腳手架。如vue-cli就是一個很是好用的cli工具。git

PS：cli 是一個全局安裝的 npm 包。github

目標vue-cli

製做一個cli工具，步驟以下：npm

一、將咱們的工程模板放到Github上。json

若是工程模板有不少個，能夠新建一個Organizations，統一放置到這裏面。我工程模板有不少個，會統一放Organizations下面。ide

若是工程模板是放在公司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;