為什么要搭建cli
在前端開(kāi)發(fā)中牙瓢,在搭建好一套自己滿(mǎn)意的代碼架子后贸典,希望以后可以在別的開(kāi)發(fā)中也一直沿用配乓。之前或許把這份代碼的結(jié)構(gòu)再手動(dòng)碼一份底循,但這樣的重復(fù)勞動(dòng)其實(shí)搭建好自己的cli后巢株,就可以通過(guò)幾個(gè)命令來(lái)完成了
搭建cli準(zhǔn)備
首先新建自己cli項(xiàng)目完成初始化配置之后。然后完成以下步驟
npm init
-
在package.json中新建bin對(duì)象熙涤,如下圖
image.png
這個(gè)對(duì)象中存放著之后需要執(zhí)行的命令阁苞。
- 新建bin目錄,添加執(zhí)行的js文件祠挫,注意這里的js文件需要以#!/usr/bin/env node這個(gè)開(kāi)頭那槽,表明用node執(zhí)行
- 安裝搭建cli的包
"dependencies": { "inquirer": "^4.0.0", "ora": "^1.3.0", "rimraf": "^2.6.2", "chalk": "^2.3.0", "commander": "^2.11.0", "download-git-repo": "^1.0.1" }
簡(jiǎn)單介紹下面幾個(gè)包的作用
commander:設(shè)置一些node命令,如包的help等舔、usage骚灸、version、parse輸入的參數(shù)慌植,
download-git-repo:下載git上的模板甚牲,并存到本地,
chalk:可以修改輸出console顏色,
inquirer:用戶(hù)判斷,是否執(zhí)行
ora:下載包時(shí)蝶柿,產(chǎn)生loading的圖標(biāo)
rimraf:刪除文件
編寫(xiě)cli代碼
-
創(chuàng)建目錄文件chrys.js
image.png
定義版本號(hào)丈钙,及子命令和一些說(shuō)明簡(jiǎn)介
-
創(chuàng)建子命令文件 chrys-init.js
1 .
image.png
定義用法,及轉(zhuǎn)化參數(shù)交汤。
2 .
image.png
3 .
image.png
獲取參數(shù)及存放位置。
4 .image.png
下載模板到對(duì)應(yīng)文件夾
到此一個(gè)簡(jiǎn)單的cli就搭建完成芙扎,那么我們?nèi)绾问褂盟?/p>
使用
1 .本地調(diào)試或使用
node bin/chrys.js template-name project-name
星岗,或者
npm install -g
chrys init template-name project-name
2 .發(fā)布到npm
首先需要注冊(cè)npm賬號(hào),然后執(zhí)行如下命令
npm login
npm publish
每次發(fā)布版本號(hào)要更新戒洼,其次就是包的名字要唯一俏橘,假如被人使用只能換個(gè)名字了。
github地址:https://github.com/Chryseis/chryseis-cli