inquirer.js交互式命令行用户界面

这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战

基本说明

• 能交互提问, 设置需要交互的内容，例如 输入， 选择等
• 能处理回答，设置处理函数

提问配置参数

• type 问题类型 input、confirm、 list、rawlist、expand、checkbox、password、editor
• name 数据属性
• default 默认值
• message 提示信息
• choices 列表选项，在某些type下可用，并且包含一个分隔符(separator)
• validate 校验函数 对用户的回答进行校验
• filter 对用户的回答进行过滤处理，返回处理后的值
• transformer 转换器
• when 接收当前用户的答案 hash 并且应该返回true or false取决于是否应该询问这个问题。该值也可以是一个简单的布尔值
• pageSize 修改某些type类型下的渲染行数。
• prefix 修改message默认前缀。
• suffix 修改message默认后缀。
• loop 启用列表循环。默认值：true

安装使用

npm install inquirer

不同类型问题使用案例

• input

inquirer.prompt([
  {
    type: 'input',
    name: 'css-loader',
    message: 'CSS预处理器名字',
  }  
]).then(answers => {
  // 打印互用输入结果
  console.log(answers)
}).catch((error) => {
  console.log("🚀 ~ file: 01.md ~ line 36 ~ error", error)
  if (error.isTtyError) {
    // Prompt couldn't be rendered in the current environment
  } else {
    // Something else went wrong
  }
});

• number

inquirer.prompt([
  {
    type: 'number',
    name: 'num',
    message: '号码',
  }  
]).then(answers => {
  // 打印互用输入结果
  console.log(answers)
});

• confirm 是否选择 (y/n)

// y: 返回 true, n: 返回 false
inquirer.prompt([
  {
    type: 'confirm',
    name: 'isExit',
    message: '是否退出'
  }
]).then(answers => {
  // 打印互用输入结果
  console.log(answers)
});

• list 选择列表

inquirer.prompt([
  {
    type: 'list',
    name: 'city',
    message: '选择地方',
    choices: [
      { name: '北京', value: '1' },
      { name: '上海', value: '2' },
      { name: '杭州', value: '3' }
    ]
  }
]).then(answers => {
  // 打印互用输入结果
  console.log(answers)
});

• rawlist 带编号的选择列表

inquirer.prompt([
  {
    type: 'rawlist',
    name: 'num',
    message: '编号',
    choices: [
      { name: '1', value: 1 },
      { name: '2', value: 2 }
    ],
    default: 0 // 默认值为列表项编号，起始为 0
  }
]).then(answers => {
  // 打印互用输入结果
  console.log(answers)
});

• expand 带缩写选择列表

inquirer.prompt([
  {
    type: 'expand',
    message: '请选择语言',
    name: 'lang',
    choices: [
      {
        key: 'j',
        name: 'lang_js',
        value: "javascript",
      },
      {
        key: 'p',
        name: 'lang_py',
        value: "python",
      },
      new inquirer.Separator(),
      {
        key: 'x',
        name: 'Abort',
        value: 'abort',
      },
    ],
  },
])
.then((answers) => {
  console.log(JSON.stringify(answers, null, '  '));
});

• checkbox 多选列表

inquirer.prompt([
  {
    type: 'checkbox',
    name: 'lang',
    message: '语言',
    choices: [
      { name: 'javascript', value: 1 },
      { name: 'php', value: 2 },
      { name: 'go', value: 3 },
    ],
  }
]).then(answers => {
  // 打印互用输入结果
  console.log(answers)
});

• password 密码输入框

inquirer.prompt([
  {
      type: 'password',
      name: 'pw',
      message: '密码',
  }
]).then(answers => {
  // 打印互用输入结果
  console.log(answers)
});

• edit 编辑器

inquirer.prompt([
  {
    type: 'editor',
    name: 'content',
    message: '内容'
  }
]).then(answers => {
  // 打印互用输入结果
  console.log(answers)
});