inquirer.js一个用户与命令行交互的工具详解


Posted in Javascript onMay 18, 2019

写在前面:

开始通过npm init 创建package.json的时候就有大量与用户的交互(当然也可以通过参数来忽略输入);而现在大多数工程都是通过脚手架来创建的,使用脚手架的时候最明显的就是与命令行的交互,如果想自己做一个脚手架或者在某些时候要与用户进行交互,这个时候就不得不提到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默认后缀。

上面的属性(除transformer外)在下面都有对应使用。

一. 使用

0. 语法结构

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

效果:

inquirer.js一个用户与命令行交互的工具详解

2. confirm

const promptList = [{
  type: "confirm",
  message: "是否使用监听?",
  name: "watch",
  prefix: "前缀"
},{
  type: "confirm",
  message: "是否进行文件过滤?",
  name: "filter",
  suffix: "后缀",
  when: function(answers) { // 当watch为true的时候才会提问当前问题
    return answers.watch
  }
}];

效果:

inquirer.js一个用户与命令行交互的工具详解 

inquirer.js一个用户与命令行交互的工具详解

3. list

const promptList = [{
  type: 'list',
  message: '请选择一种水果:',
  name: 'fruit',
  choices: [
    "Apple",
    "Pear",
    "Banana"
  ],
  filter: function (val) { // 使用filter将回答变为小写
    return val.toLowerCase();
  }
}];

效果:

inquirer.js一个用户与命令行交互的工具详解 

inquirer.js一个用户与命令行交互的工具详解

4. rawlist

const promptList = [{
  type: 'rawlist',
  message: '请选择一种水果:',
  name: 'fruit',
  choices: [
    "Apple",
    "Pear",
    "Banana"
  ]
}];

效果:

inquirer.js一个用户与命令行交互的工具详解

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

效果:

inquirer.js一个用户与命令行交互的工具详解 

inquirer.js一个用户与命令行交互的工具详解

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 // 设置行数
}];

效果:

inquirer.js一个用户与命令行交互的工具详解 

inquirer.js一个用户与命令行交互的工具详解

7. password

const promptList = [{
  type: "password", // 密码为密文输入
  message: "请输入密码:",
  name: "pwd"
}];

效果:

inquirer.js一个用户与命令行交互的工具详解

8. editor

const promptList = [{
  type: "editor",
  message: "请输入备注:",
  name: "editor"
}];

效果:

inquirer.js一个用户与命令行交互的工具详解 

inquirer.js一个用户与命令行交互的工具详解

写在后面:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
js实现简单的打印表格
Jan 15 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
webpack 代码分离优化快速指北
May 18 #Javascript
如何实现小程序tab栏下划线动画效果
May 18 #Javascript
微信小程序结合Storage实现搜索历史效果
May 18 #Javascript
Fetch超时设置与终止请求详解
May 18 #Javascript
微信小程序实现搜索历史功能
Mar 26 #Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 #Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 #Javascript
You might like
PHP nl2br函数 将换行字符转成 <br>
2009/08/21 PHP
php cout<<的一点看法
2010/01/24 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
jQuery的框架介绍
2016/05/11 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
Python 错误和异常小结
2013/10/09 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
对python中dict和json的区别详解
2018/12/18 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python全局变量引用与修改过程解析
2020/01/07 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
诚信承诺书模板
2014/05/26 职场文书
单位消防安全责任书
2014/07/23 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
Python必备技巧之字符数据操作详解
2022/03/23 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL