commander腳手架工具使用詳解
概述
在當(dāng)前我們前端項(xiàng)目中,大多數(shù)情況下,都是使用對(duì)應(yīng)框架開發(fā)的腳手架進(jìn)行項(xiàng)目工程化的搭建,既然要用到腳手架,那么肯定會(huì)用到命令,比如vue-cli的創(chuàng)建命令:vue create projectName,要想解析控制臺(tái)輸出的自定義命令,離不開commander這個(gè)工具。
commander負(fù)責(zé)將參數(shù)解析為選項(xiàng)和命令參數(shù)。記錄一期這個(gè)工具的基本使用。
下載
npm install commander
預(yù)備工作
- 第一步: 首先需要控制臺(tái)能解析識(shí)別我們自定的命令,像vue-cli,他的命令是vue,我們這里假設(shè)自定義gnip,因此,需要給js文件加上這句話
#!/usr/bin/env node //下面正常的node代碼,比如我們需要配置的命令 console.log('自定義命令執(zhí)行了")
- 第二步: 在package.json文件中,新加bin配置項(xiàng)
{ "name": "gnip-cli", "version": "1.0.4", "description": "gnip-cli", "main": "index.js", //這里將我們?nèi)中枰獔?zhí)行的命令放到這里,當(dāng)我們npm下載時(shí)候,會(huì)自動(dòng)加到環(huán)境變量中(然后你就可以通過(guò) gnip xxx使用你的命令了) "bin": { "gnip": "./index.js" }, "scripts": {}, "keywords": [ "cli" ], "author": "gnip", "license": "ISC", "devDependencies": { "commander": "^9.4.0", "download-git-repo": "^3.0.2" }, "dependencies": { "ejs": "^3.1.8", "inquirer": "^7.3.3" }, "files": [ "node_modules", "lib", "*" ] }
- 第三步: 執(zhí)行npm link,將當(dāng)前項(xiàng)目映射到全局,在其他目錄下我們就可以使用gnip這個(gè)全局命令了
核心重要的選項(xiàng)
option
這個(gè)方法可以使我們執(zhí)行類似于gnip -g haha 等的帶參數(shù)的命令時(shí),可以解析注意點(diǎn):
- 一個(gè)-是簡(jiǎn)寫,--的是全稱
- 這種尖角括號(hào)代表必填參數(shù)(后面不跟參數(shù)會(huì)提示少參數(shù))
//index.js const program = require("commander"); program //-g表示參數(shù),比如:gnip -g,第二個(gè)參數(shù)為當(dāng)前選項(xiàng)描述后面可以不接參數(shù) .option("-g", "a gnip cli") //-d是簡(jiǎn)寫,--dest 是全稱,<dest>標(biāo)書參數(shù)名,必填,因此你的命令可以是 gnip -d 哈哈或者gnip --dest 哈哈 .option("-d, --dest <dest>", "a destion folder,例如:-d /src/components") //同上 .option("-f, --framework <framework>", "your framework,such as vue react") //鏈?zhǔn)秸{(diào)用解析參數(shù) .parse(); // 監(jiān)聽option對(duì)象的變化,做出回應(yīng) const options = program.opts();//獲取配置參數(shù)對(duì)象 if (options.g) { console.log("a gnip cli"); } else if (options.dest) { console.log("a destion folder,例如:-d /src/components"); } else if (options.framework) { console.log("your framework,such as vue react"); }
command
用來(lái)注冊(cè)命令和對(duì)應(yīng)的回調(diào)邏輯,比如我想執(zhí)行和vue cli一樣的create命令,可以這樣gnip create projectName
const program = require("commander"); // 創(chuàng)建工程項(xiàng)目,例如:gnip create demon01 program .command("create <projectName>") .description("clone a repository from remote") .action(()=>{ //當(dāng)用戶通過(guò) gnip create demon01回車的時(shí)候就會(huì)執(zhí)行這個(gè)回調(diào),這里你可以讀寫文件,下載項(xiàng)目模板,克隆遠(yuǎn)程倉(cāng)庫(kù),下載包等等 })
總結(jié)
其實(shí)上面兩個(gè)方法就足夠我們自己寫一個(gè)自動(dòng)化腳本命令了,甚至是一個(gè)自定義的腳手架,腳手架搭建還可以配合其他的工具,后面再介紹,更多commander的用法,可以看文檔,內(nèi)容很多,我這里只記錄了常用的,后面陸續(xù)更新inquirer,ejs,download-git-repo的搭配使用,更多關(guān)于commander腳手架工具的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js展示百度地圖及添加標(biāo)注實(shí)現(xiàn)
這篇文章主要為大家介紹了js展示百度地圖及添加標(biāo)注實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08JS數(shù)據(jù)分析數(shù)據(jù)去重及參數(shù)序列化示例
這篇文章主要為大家介紹了JS數(shù)據(jù)分析數(shù)據(jù)去重及參數(shù)序列化示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08JavaScript面試數(shù)組index和對(duì)象key問(wèn)題詳解
這篇文章主要為大家介紹了JavaScript面試數(shù)組index和對(duì)象key問(wèn)題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12javascript的setTimeout()使用方法總結(jié)
這篇文章主要給大家分享javascript的setTimeout()使用方法總結(jié),js的setTimeout方法用處比較多,通常用在頁(yè)面刷新了、延遲執(zhí)行了等等,下面我們一起來(lái)看看文章對(duì)該內(nèi)容的具體總結(jié)吧,需要的朋友可以參考一下2021-11-11JS前端實(shí)現(xiàn)解除頁(yè)面禁止復(fù)制功能方法詳解
這篇文章主要為大家介紹了JS前端實(shí)現(xiàn)解除頁(yè)面禁止復(fù)制功能方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08autojs使用intent發(fā)送郵件帶附件實(shí)現(xiàn)示例
這篇文章主要為大家介紹了autojs使用intent發(fā)送郵件帶附件實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01JavaScript實(shí)現(xiàn)一鍵復(fù)制內(nèi)容剪貼板
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)一鍵復(fù)制內(nèi)容,document.execCommand原生JS設(shè)置剪貼板的實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07詳解Three.js?場(chǎng)景中如何徹底刪除模型和性能優(yōu)化
這篇文章主要為大家介紹了詳解Three.js?場(chǎng)景中如何徹底刪除模型和性能優(yōu)化,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04