inquirer.js一個用戶與命令行交互的工具詳解
寫在前面:
開始通過npm init 創(chuàng)建package.json的時候就有大量與用戶的交互(當(dāng)然也可以通過參數(shù)來忽略輸入);而現(xiàn)在大多數(shù)工程都是通過腳手架來創(chuàng)建的,使用腳手架的時候最明顯的就是與命令行的交互,如果想自己做一個腳手架或者在某些時候要與用戶進(jìn)行交互,這個時候就不得不提到inquirer.js了。
零. 介紹
由于交互的問題種類不同,inquirer為每個問題提供很多參數(shù):
- type:表示提問的類型,包括:input, confirm, list, rawlist, expand, checkbox, password, editor;
- name: 存儲當(dāng)前問題回答的變量;
- message:問題的描述;
- default:默認(rèn)值;
- choices:列表選項,在某些type下可用,并且包含一個分隔符(separator);
- validate:對用戶的回答進(jìn)行校驗;
- filter:對用戶的回答進(jìn)行過濾處理,返回處理后的值;
- transformer:對用戶回答的顯示效果進(jìn)行處理(如:修改回答的字體或背景顏色),但不會影響最終的答案的內(nèi)容;
- when:根據(jù)前面問題的回答,判斷當(dāng)前問題是否需要被回答;
- pageSize:修改某些type類型下的渲染行數(shù);
- prefix:修改message默認(rèn)前綴;
- suffix:修改message默認(rèn)后綴。
上面的屬性(除
transformer外)在下面都有對應(yīng)使用。
一. 使用
0. 語法結(jié)構(gòu)
const inquirer = require('inquirer');
const promptList = [
// 具體交互內(nèi)容
];
inquirer.prompt(promptList).then(answers => {
console.log(answers); // 返回的結(jié)果
})
1. input
const promptList = [{
type: 'input',
message: '設(shè)置一個用戶名:',
name: 'name',
default: "test_user" // 默認(rèn)值
},{
type: 'input',
message: '請輸入手機號:',
name: 'phone',
validate: function(val) {
if(val.match(/\d{11}/g)) { // 校驗位數(shù)
return val;
}
return "請輸入11位數(shù)字";
}
}];
效果:

2. confirm
const promptList = [{
type: "confirm",
message: "是否使用監(jiān)聽?",
name: "watch",
prefix: "前綴"
},{
type: "confirm",
message: "是否進(jìn)行文件過濾?",
name: "filter",
suffix: "后綴",
when: function(answers) { // 當(dāng)watch為true的時候才會提問當(dāng)前問題
return answers.watch
}
}];
效果:

3. list
const promptList = [{
type: 'list',
message: '請選擇一種水果:',
name: 'fruit',
choices: [
"Apple",
"Pear",
"Banana"
],
filter: function (val) { // 使用filter將回答變?yōu)樾?
return val.toLowerCase();
}
}];
效果:

4. rawlist
const promptList = [{
type: 'rawlist',
message: '請選擇一種水果:',
name: 'fruit',
choices: [
"Apple",
"Pear",
"Banana"
]
}];
效果:

5. expand
const promptList = [{
type: "expand",
message: "請選擇一種水果:",
name: "fruit",
choices: [
{
key: "a",
name: "Apple",
value: "apple"
},
{
key: "O",
name: "Orange",
value: "orange"
},
{
key: "p",
name: "Pear",
value: "pear"
}
]
}];
效果:

6. checkbox
const promptList = [{
type: "checkbox",
message: "選擇顏色:",
name: "color",
choices: [
{
name: "red"
},
new inquirer.Separator(), // 添加分隔符
{
name: "blur",
checked: true // 默認(rèn)選中
},
{
name: "green"
},
new inquirer.Separator("--- 分隔符 ---"), // 自定義分隔符
{
name: "yellow"
}
]
}];
// 或者下面這樣
const promptList = [{
type: "checkbox",
message: "選擇顏色:",
name: "color",
choices: [
"red",
"blur",
"green",
"yellow"
],
pageSize: 2 // 設(shè)置行數(shù)
}];
效果:

7. password
const promptList = [{
type: "password", // 密碼為密文輸入
message: "請輸入密碼:",
name: "pwd"
}];
效果:

8. editor
const promptList = [{
type: "editor",
message: "請輸入備注:",
name: "editor"
}];
效果:

寫在后面:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信支付如何實現(xiàn)內(nèi)置瀏覽器的H5頁面支付
這篇文章主要介紹了微信支付如何實現(xiàn)內(nèi)置瀏覽器的H5頁面支付的相關(guān)資料,需要的朋友可以參考下2015-09-09
JavaScript??际謱戭}之柯里化與數(shù)組扁平化的實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了JavaScript??际謱戭}中柯里化與數(shù)組扁平化、數(shù)組去重的實現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
把json格式的字符串轉(zhuǎn)換成javascript對象或數(shù)組的方法總結(jié)
下面小編就為大家?guī)硪黄裫son格式的字符串轉(zhuǎn)換成javascript對象或數(shù)組的方法總結(jié)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
本地圖片預(yù)覽(支持IE6/IE7/IE8/Firefox3)經(jīng)驗總結(jié)
遇到的本地圖片預(yù)覽的需求,IE6下可以直接從file的value獲取圖片路徑來顯示預(yù)覽,IE7和IE8下通過select獲取file的圖片路徑,再用濾鏡來顯示預(yù)覽,至于FireFox祥看本文吧,希望可以幫助到你2013-03-03
javascript 函數(shù)參數(shù)原來是可以有缺省值的
前幾天看 javaEye 時看到一個童鞋寫的 getElementsByClassName 函數(shù)。2010-07-07
js style.display=block顯示布局錯亂問題的解決方法
下面小編就為大家?guī)硪黄猨s style.display=block顯示布局錯亂問題的解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09

