1. 程式人生 > >從零開始製作cli工具,快速建立專案腳手架

從零開始製作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.