commander
開發方向
GUI - Graphical User Interface ： 圖形用戶界面
office、vscode、瀏覽器、播放器……
CLI - Command-Line Interface：命令行界面，也稱爲 CUI，字符用戶界面
雖然沒有GUI操作直觀，但是CLI更加節省計算機資源（所以一般用於服務器環境）
babel、tsc / webpack / vue-cli
Server - 服務提供（Web Server、IM……）
CLI
command [subCommand] [options] [arguments]
command：命令，比如 vue
[subCommand]：子命令，比如 vue create
[options]：選項，配置，同一個命令不同選項會有不一樣的操作結果，比如 vue -h，vue -v
[arguments]：參數，某些命令需要使用的值，比如 vue create myApp
選項與參數的區別：選項是命令內置實現，用戶進行選擇，參數一般是用戶決定傳入的值
選項一般會有全拼與簡寫形式（具體看使用的命令幫助），比如 --version = -v
全拼：以 – 開頭 / 簡寫：以 - 開頭
選項也可以接受值，值寫在選項之後，通過空格分隔
多個簡寫的選項可以連寫，開頭使用一個 - 即可，需要注意的是，如果有接受值的選項需要放在最後，比如：
vue create -d -r <-r的值> myApp
vue create -dr <-r的值> myApp
commander
命令行開發工具
chalk
命令行樣式風格控制器
inquirer
交互式命令行工具
.parse(argv: string[])
解析執行傳入的 argv 命令字符串，通常改命令字符串來自用戶在命令行的輸入，process.argv
commander 同時會默認創建一個 -h, --help 的選項
.version(str, flags?)
設置版本信息，該方法會自動爲命令註冊一個 -V, --version 的 option
str：版本號
flags：指定的 option，默認爲：”-V, --version”
.option(flags, description?, fn?, defaultValue?)
設置命令選項
flags：選項標記名稱，”-v, --version”
description：選項使用說明
fn：默認值，函數返回值爲defaultValue，優先級高於defaultValue
defaultValue：選項默認值，如果需要的話
選項屬性
flags 中的格式可以接收參數
-n, --name [val]
-n, --name
[] 可選
<> 必填
設置成功以後，會在命令對象下增加一個與全局的同名的屬性
.action(fn)
指定命令要執行的動作行爲
該函數執行過程會接收到至少一個參數
如果命令中帶有參數，則是對應的參數列表
參數的最後一個永遠都是 commander 實例
.command(name, desc?, opts?)
name：命令的名稱，也可以接受值
‘create [appName]’
desc：簡介
opts：配置
.description(str)
命令描述
.alias(str)
設置命令別名
.usage(str)
設置或獲取當前命令的使用說明
npm i commander
const commander=require('commander')
//設置當前的命令的版本
// commander.version('1.0.1')
//設置當前命令行可以改大小寫
commander.version('1.0.1','-v,--version')
//[]表示可選 <>表示必填
// commander.option('-n, --name <val>','打印名稱','cccc')
commander.option('-n, --name[val]','打印名稱',function(val){
console.log(val,'000000')
return val
})
//設置命令的動作
commander.action(()=>{
//console.log(commander)
console.log('hi '+commander.rawArgs.name)
})
//解析來自process.argv上的數據
commander.parse(process.argv)
// console.log(commander);
ls
/**
* ls 輸出當前運行的目錄文件
* ls d:\
* 我們可以指定目錄
*
*/
//加載commander方法
const commander=require('commander');
const fs=require('fs')
//設置當前命令工具的版本
commander.version('v1.0.0','-v, --version')
//子命令沒有名字，
// const subcommander=commander.command('<path>')
// subcommander.option('-n, --name','設置名字')
//實現命令具體邏輯
commander.action((path)=>{
//這裏的path參數就是命令中定義的path
console.log(path);
//當前命令指定的目錄下的文件以及文件夾全部顯示在控制檯上
try{
const files=fs.readdirSync(path)
console.log(files);
}catch(e){
console.log(e);
}
})
if(process.argv.length<3){
process.argv.push(__dirname)
}
//解析argv
commander.parse(process.argv)
實現-l命令
/**
* ls 輸出當前運行的目錄文件
* ls d:\
* 我們可以指定目錄
*
*/
//加載commander方法
const commander=require('commander');
const fs=require('fs')
//設置當前命令工具的版本
commander.version('v1.0.0','-v, --version')
commander.option('-p ,--path [path]','設置要顯示的目錄',__dirname)
//如果選項不接收用戶輸入的參數值，那麼這個選項將以boolean的形式提供給後面的形式使用
commander.option('-l ,-list [path]','以列表的形式顯示')
//實現命令具體邏輯
commander.action(()=>{
//這裏的path參數就是命令中定義的path
//option中的變量會掛在當前commander對象的同名屬性下
try{
const files=fs.readdirSync(commander.path)
console.log(commander.List);
if(commander.List){
let output=files.map(file =>{
let stat=fs.statSync(commander.path+'/'+file);
//是否文件夾
let type=stat.isDirectory()?'目錄':'文件'
return `[${type}] ${file} \r\n`
}).join('');
console.log(output);
}else{
console.log('00000000000000000000000000')
console.log(files);
}
}catch(e){
console.log(e);
}
//console.log(commander);
})
if(process.argv.length<3){
process.argv.push(__dirname)
}
//解析argv
commander.parse(process.argv)
chalk的案例在ls裏面運用到
chalk 處理顏色
chalk
chalk.<style>[.<style>...](string, [string...])
Styles
Modifiers 文字修飾：
bold Colors 文字顏色：red、green、yellow、blue、cyan
Background colors 背景顏色：bgRed、bgGreen、bgYellow、bgBlue、bgCyan
chalk
Colors
.hex('#DEADED')
.keyword('orange')
.rgb(15, 100, 204)
Background colors
.hex('#DEADED')
.keyword('orange')
.rgb(15, 100, 204)
chalk
安裝
npm i chalk / yarn add chalk
使用
const chalk = require('chalk')
得到一個 chalk 對象，通過這個對象，我們就可以給控制檯中的文字加上各種樣式了，就像css一樣
Inquirer
交互式命令，提問用戶，收集用戶輸入數據
安裝
npm i inquirer
使用
require(‘inquirer’)
inquirer.prompt(questions).then(answers=>{
…
})
q.js
const inquirer=require('inquirer')
//提問用戶，與用戶進行命令行的交互
// prompt數組中存在一個指定格式的對象
/*
Inquirer
questions
type：提問類型，input, confirm, list, rawlist, expand, checkbox, password, editor
name：問題名稱，供程序後續使用
message：問題文字，給用戶看的
default：默認值
choices：選項
validate：輸入驗證
filter：數據過濾
*/
inquirer.prompt([
{
type:'input',
name:'username',
message:'請輸入姓名',
default:'wanzi',
validate(val){
if(val.trim()==''){
return '應用名稱不能爲空'
}else{
return true
}
},
//對用戶輸入的數據或選擇的數據進行過濾
filter(val){
return val.toLowerCase()
}
},
{
type:'confirm',
name:'xingbie',
message:'是否同性戀',
default:false
},{
type:'list',
name:'gongzi',
message:'你的工資範圍',
choices:[
'100-1000',
'1000-2000'
],
default:1
},{
type:'rawlist',
name:'gongzi2',
message:'你的工資範圍',
choices:[
'100-1000',
'1000-2000'
],
default:1
},{
type:'checkbox',
name:'tools',
message:'你感興趣的話題',
choices:[{
name:'美妝',
value:'meizhuang',
checked:true
},{
name:'明星',
value:'mingxing'
},{
name:'八卦',
value:'bagua'
}]
}
]).then(answers=>{
console.log(answers);
})