Inquirer 交互式命令行提示器

6,212 阅读1分钟

简介

Inquirer 交互式的命令行信息收集器。 版本 v8.8.1

安装

npm i Inquirer

使用例子

async function run(){


  try {
    const answers = await inquirer.prompt([
      {
        type: 'input',
        name: 'project',
        message: '项目名称',
        default: 'copyLeft',
      },
      {
        type: 'list',
        name: 'type',
        message: '项目类型',
        default: 'vue',
        choices: [
          { name: 'vue', value: 'vue' },
          { name: 'react', value: 'react' },
          { name: 'jq', value: 'jq' },
        ]        
      }
    ])


    console.log('答案: ', answers)
    
  } catch (error) {
    console.log(`错误: ${error}`)
  }
}

image.png

提示器 promp

inquirer.prompt( questions, answers ) → promise 提示器接收预设交互问题配置( questions ), 预设回答( answers )。 返回包含交互收集信息的 Promise 对象

  • questions 问题列表
  • answers 预设或已收集问题回答, 对于已回答的问题,将跳过对应的问题收集。
const questions = [
  {
    // 问题对象
    type: 'input',
    name: 'project',
    message: '项目名称',
    default: 'copyLeft',
  },
  {
    type: 'list',
    name: 'type',
    message: '项目类型',
    default: 'vue',
    choices: [
      { name: 'vue', value: 'vue' },
      { name: 'react', value: 'react' },
      { name: 'jq', value: 'jq' },
    ]        
  }
]


const answers = {
  project: 'demo'
}
// 设置 answers 后将跳过 `项目名称` 提问
inquirer.prompt(questions, answers)  

Question 提问

{
  type: 'input' // 交互组件类型
  name: 'name' // 数据属性名称
  message: '用户名' // 交互提示
  default: '' // 默认值
  choices: '' // 当交互类型为`选择类型`时, 该属性配置可选项目


  // 校验函数, 函数以当前回答为参数。 返回: true 通过 false 不通过,无提示 Error 不通过,显示错误信息
  validate(value){
    return !value.length ? new Error('项目名称不能为空') : true
  }
  
  // 过滤器, 返回修改后的回答。优先级高于 `validte`
  filter(value){
     return /vue/.test(value) ? `${value}-demo` : value
  }
  // 转换器, 返回转换后的值,只作为显示,不影响收集结果
  transformer(value){
     return /vue/.test(value) ? `${value}-demo` : value
  },
  // 是否显示问题
  when(answers){
     return !!answers.company
  },
  // message 前缀
  prefix: '',
  // message 后缀
  suffix: '',
  // 如果回答已存在, 是否依然提问
  askAnswered: false,
  // 
}

Answers 回答

回答是一个 key: value d的hash 对象. key: 对应提问内的 name 属性值, value: 根据交互类型不同, 取值略有不同

{
  // value 对应的值类型
  confirm: boolean
  input: string
  number: number
  rawlist/list: value 
}

交互组件类型

  • input 输入框
const input = {
  type: 'input',
  name: '输入框',
  message: 'input',
}
  • number 数字输入框
const number = {
  type: 'number',
  name: '数字输入框',
  message: 'number',
}
  • password 密码框
const password = {
  type: 'password',
  name: '密码框',
  message: 'password',
}
  • list 单选
const list = {
  type: 'list',
  name: '单选',
  message: 'list',
  choices: [
    { name: '1', value: 1 },
    { name: '2', value: 2 },
    { name: '3', value: 3 }
  ]
}
  • rawlist 列表
const rawlist = {
  type: 'rawlist',
  name: '列表',
  message: 'rawlist',
  choices: [
    { name: '1', value: 1 },
    { name: '2', value: 2 },
    { name: '3', value: 3 }
  ]
}
  • checkbox 多选
const checkbox = {
  type: 'checkbox',
  name: '多选',
  message: 'checkbox',
  choices: [
    { name: '1', value: 1 },
    { name: '2', value: 2 },
    { name: '3', value: 3 }
  ]
}
  • confirm 判断
const confirm = {
  type: 'confirm',
  name: '判断',
  message: 'confirm',
}
  • editor 文本编辑器
const editor = {
  type: 'editor',
  name: '编辑器',
  message: 'editor',
}

插件

加载外部插件

inquirer.registerPrompt(插件名称, 插件包)

inquirer.registerPrompt('selectLine', require('inquirer-select-line'));

其他

Separator 分割符

inquirer.prompt([
  {
    type: 'checkbox',
    name: '多选',
    message: 'checkbox',
    choices: [ "Choice A", new inquirer.Separator(), "choice B" ]
  }
])

image.png