欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

inquirer.js一個(gè)用戶與命令行交互的工具詳解

 更新時(shí)間:2019年05月18日 12:06:26   作者:xhsdnn  
這篇文章主要介紹了inquirer.js一個(gè)用戶與命令行交互的工具詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

寫在前面:

開(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ù)字";
  }
}];

效果:

input

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
  }
}];

效果:

confirm_y 

confirm_n

3. list

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

效果:

list_1 

list

4. rawlist

const promptList = [{
  type: 'rawlist',
  message: '請(qǐng)選擇一種水果:',
  name: 'fruit',
  choices: [
    "Apple",
    "Pear",
    "Banana"
  ]
}];

效果:

rawlist

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"
    }
  ]
}];

效果:

expend_1 

expend_2

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ù)
}];

效果:

checkbox_sep 

checkbox_size

7. password

const promptList = [{
  type: "password", // 密碼為密文輸入
  message: "請(qǐng)輸入密碼:",
  name: "pwd"
}];

效果:

pwd

8. editor

const promptList = [{
  type: "editor",
  message: "請(qǐng)輸入備注:",
  name: "editor"
}];

效果:

editor_inset 

editor_res

寫在后面:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論