通过npm init 创建package.json的时候就有大量与用户的交互(当然也可以通过参数来忽略输入);而现在大多数工程都是通过脚手架来创建的,使用脚手架的时候最明显的就是与命令行的交互,如果想自己做一个脚手架或者在某些时候要与用户进行交互,这个时候就需要用到 [inquirer.js](https://github.com/SBoudrias/Inquirer.js)。
介绍
GitHub项目地址:
https://github.com/SBoudrias/Inquirer.js
主要功能:
- 提供错误反馈
- 问问题
- 解析输入
- 验证答案
- 管理分层提示
参数方法说明:
由于交互的问题种类不同,inquirer为每个问题提供很多参数:
- type:表示提问的类型,包括:
input,confirm,list,rawlist,expand,checkbox,password,editor; - name: 存储当前问题回答的变量;
- message:问题的描述;
- default:默认值;
- choices:列表选项,在某些
type下可用,并且包含一个分隔符(separator); - validate:对用户的回答进行校验;
- filter:对用户的回答进行过滤处理,返回处理后的值;
- transformer:对用户回答的显示效果进行处理(如:修改回答的字体或背景颜色),但不会影响最终的答案的内容;
- when:根据前面问题的回答,判断当前问题是否需要被回答;
- pageSize:修改某些
type类型下的渲染行数; - prefix:修改
message默认前缀; - suffix:修改
message默认后缀。
安装
npm install inquirer -S
使用
1. 基本语法
const inquirer = require('inquirer');const promptList = [// 具体交互内容];inquirer.prompt(promptList).then(answers => {console.log(answers); // 返回的结果})
1. input
const promptList = [{type: 'input',message: '设置一个用户名:',name: 'name',default: "test_user" // 默认值},{type: 'input',message: '请输入手机号:',name: 'phone',validate: function(val) {if(val.match(/\d{11}/g)) { // 校验位数return val;}return "请输入11位数字";}}];
2. confirm
const promptList = [{type: "confirm",message: "是否使用监听?",name: "watch",prefix: "前缀"},{type: "confirm",message: "是否进行文件过滤?",name: "filter",suffix: "后缀",when: function(answers) { // 当watch为true的时候才会提问当前问题return answers.watch}}];
3. list
const promptList = [{type: 'list',message: '请选择一种水果:',name: 'fruit',choices: ["Apple","Pear","Banana"],filter: function (val) { // 使用filter将回答变为小写return val.toLowerCase();}}];
4. rewlist
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 // 默认选中},{name: "green"},new inquirer.Separator("--- 分隔符 ---"), // 自定义分隔符{name: "yellow"}]}];// 或者下面这样const promptList = [{type: "checkbox",message: "选择颜色:",name: "color",choices: ["red","blur","green","yellow"],pageSize: 2 // 设置行数}];
7. password
const promptList = [{type: "password", // 密码为密文输入message: "请输入密码:",name: "pwd"}];
8. editor
const promptList = [{type: "editor",message: "请输入备注:",name: "editor"}];
完整示例
var inquirer = require('inquirer');// inquirer// .prompt([// /* Pass your questions in here */// ])// .then(answers => {// // Use user feedback for... whatever!!// });var prompList = [{type:'input',message:'姓名',name:'name'},{type:'input',message:'手机号',name:'phone',validate:val=>{if(val.match(/\d{11}/g)){return true}return '请输入11位数字'}},{type:'confirm',message:'是否参加本次考核?',name:'assess',prefix:'前缀'},{type:'confirm',message:'是否同意本次考核须知?',name:'notice',suffix:'后缀',when:answers=>{return answers.assess}},{type:'list',message:'欢迎来到本次考核,请选择学历:',name:'eductionBg',choices:["大专","本科","本科以上"],filter:val=>{//将选择的内容后面加学历return val+'学历'}},{type:'rawlist',message:'请选择你爱玩的游戏:',name:'game',choices:["LOL","DOTA","PUBG"]},{type:'expand',message:'请选择你喜欢的水果:',name:'fruit',choices: [{key: "a",name: "Apple",value: "apple"},{key: "O",name: "Orange",value: "orange"},{key: "p",name: "Pear",value: "pear"}]},{type:'checkbox',message:'请选择你喜欢的颜色:',name:'color',choices:[{name: "red"},new inquirer.Separator(), // 添加分隔符{name: "blur",checked: true // 默认选中},{name: "green"},new inquirer.Separator("--- 分隔符 ---"), // 自定义分隔符{name: "yellow"}]},{type:'password',message:'请输入你的游戏密码:',name:'pwd'}]inquirer.prompt(prompList).then(answers=>{console.log(answers);})
