inquirer.js一個(gè)用戶與命令行交互的工具詳解
寫在前面:
開(kāi)始通過(guò)npm init
創(chuàng)建package.json
的時(shí)候就有大量與用戶的交互(當(dāng)然也可以通過(guò)參數(shù)來(lái)忽略輸入);而現(xiàn)在大多數(shù)工程都是通過(guò)腳手架來(lái)創(chuàng)建的,使用腳手架的時(shí)候最明顯的就是與命令行的交互,如果想自己做一個(gè)腳手架或者在某些時(shí)候要與用戶進(jìn)行交互,這個(gè)時(shí)候就不得不提到inquirer.js
了。
零. 介紹
由于交互的問(wèn)題種類不同,inquirer為每個(gè)問(wèn)題提供很多參數(shù):
- type:表示提問(wèn)的類型,包括:input, confirm, list, rawlist, expand, checkbox, password, editor;
- name: 存儲(chǔ)當(dāng)前問(wèn)題回答的變量;
- message:?jiǎn)栴}的描述;
- default:默認(rèn)值;
- choices:列表選項(xiàng),在某些type下可用,并且包含一個(gè)分隔符(separator);
- validate:對(duì)用戶的回答進(jìn)行校驗(yàn);
- filter:對(duì)用戶的回答進(jìn)行過(guò)濾處理,返回處理后的值;
- transformer:對(duì)用戶回答的顯示效果進(jìn)行處理(如:修改回答的字體或背景顏色),但不會(huì)影響最終的答案的內(nèi)容;
- when:根據(jù)前面問(wèn)題的回答,判斷當(dāng)前問(wèn)題是否需要被回答;
- pageSize:修改某些type類型下的渲染行數(shù);
- prefix:修改message默認(rèn)前綴;
- suffix:修改message默認(rèn)后綴。
上面的屬性(除
transformer
外)在下面都有對(duì)應(yīng)使用。
一. 使用
0. 語(yǔ)法結(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è)置一個(gè)用戶名:', name: 'name', default: "test_user" // 默認(rèn)值 },{ type: 'input', message: '請(qǐng)輸入手機(jī)號(hào):', name: 'phone', validate: function(val) { if(val.match(/\d{11}/g)) { // 校驗(yàn)位數(shù) return val; } return "請(qǐng)輸入11位數(shù)字"; } }];
效果:
2. confirm
const promptList = [{ type: "confirm", message: "是否使用監(jiān)聽(tīng)?", name: "watch", prefix: "前綴" },{ type: "confirm", message: "是否進(jìn)行文件過(guò)濾?", name: "filter", suffix: "后綴", when: function(answers) { // 當(dāng)watch為true的時(shí)候才會(huì)提問(wèn)當(dāng)前問(wèn)題 return answers.watch } }];
效果:
3. list
const promptList = [{ type: 'list', message: '請(qǐng)選擇一種水果:', name: 'fruit', choices: [ "Apple", "Pear", "Banana" ], filter: function (val) { // 使用filter將回答變?yōu)樾? return val.toLowerCase(); } }];
效果:
4. rawlist
const promptList = [{ type: 'rawlist', message: '請(qǐng)選擇一種水果:', name: 'fruit', choices: [ "Apple", "Pear", "Banana" ] }];
效果:
5. expand
const promptList = [{ type: "expand", message: "請(qǐng)選擇一種水果:", 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: "請(qǐng)輸入密碼:", name: "pwd" }];
效果:
8. editor
const promptList = [{ type: "editor", message: "請(qǐng)輸入備注:", name: "editor" }];
效果:
寫在后面:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)下滑到底部自動(dòng)翻頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)下滑到底部自動(dòng)翻頁(yè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03localStorage設(shè)置有效期和過(guò)期時(shí)間的簡(jiǎn)單方法
眾所周知前端三大緩存,cookie,sessionStorage,localStorage,下面這篇文章主要給大家介紹了關(guān)于localStorage設(shè)置有效期和過(guò)期時(shí)間的相關(guān)資料,需要的朋友可以參考下2022-02-02JS中的算法與數(shù)據(jù)結(jié)構(gòu)之二叉查找樹(shù)(Binary Sort Tree)實(shí)例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之二叉查找樹(shù)(Binary Sort Tree),結(jié)合實(shí)例形式詳細(xì)分析了二叉查找樹(shù)(Binary Sort Tree)的原理、定義、遍歷、查找、插入、刪除等常見(jiàn)操作技巧,需要的朋友可以參考下2019-08-08js window.onload 加載多個(gè)函數(shù)和追加函數(shù)詳解
本篇文章主要是對(duì)js window.onload 加載多個(gè)函數(shù)和追加函數(shù)進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01使用jsonp實(shí)現(xiàn)跨域獲取數(shù)據(jù)實(shí)例講解
這篇文章主要介紹了使用jsonp實(shí)現(xiàn)跨域獲取數(shù)據(jù)實(shí)例講解,需要的朋友可以參考下2016-12-12Auntion-TableSort國(guó)人寫的一個(gè)javascript表格排序的東西
Auntion-TableSort國(guó)人寫的一個(gè)javascript表格排序的東西...2007-11-11瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
defer和async特性相信是很多JavaScript開(kāi)發(fā)者"熟悉而又不熟悉"的兩個(gè)特性,從字面上來(lái)看,二者的功能很好理解,分別是"延遲腳本"和"異步腳本"的作用2016-01-01