【前端脚手架开发】第一节-认识inquier

洛城赋
120 阅读6分钟

inquier 说明

inquier 主要用于用户和终端的交互，包含以下主要功能点

  • 询问用户
  • 解析用户输入
  • 验证答案
  • 提供错误反馈
  • 管理分层提示

1.安装(这里以@8.2.2版本为例)

npm install --save inquirer@8.2.2

2.demo

const inquirer = require("inquirer");

const prompt = inquirer.createPromptModule();

prompt([{ type: "input", message: "请输入", default: "默认值", name: "input" }])
  .then((res) => {
    console.log("结果：", res);
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });
  
 /* 或
  inquirer
   .prompt([
     { type: "input", message: "请输入", default: "默认值", name: "input" },
   ])
   .then((res) => {
     console.log("结果：", res);
   })
   .catch((err) => {
    console.error("错误信息：", err);
  });
  */

操作步骤

  1. 执行命令 node ./test01.js
  2. 执行完展示以下图

1710319067567.png

3.手动输入"覆盖默认值"（如果用户未输入则打印默认值对应default字段的值），终端打印出用户输入的字符串

1710319297669.png

3.主要方法 prompt 接收两个参数

  1. 第一个参数可以是一个数组，也可以是一个对象，对象时只能询问一个问题，并只能得到一个答案
const inquirer = require("inquirer");
const prompt = inquirer.createPromptModule();
prompt({ type: "input", message: "请输入", default: "默认值", name: "input" })
  .then((res) => {
    console.log("结果：", res);
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });

数组时可以依次询问多个问题，并同时得到多个答案，例如

const inquirer = require("inquirer");
const prompt = inquirer.createPromptModule();
prompt([
    { type: "input", message: "请输入第一个答案", default: "默认值1", name: "input1" },
    { type: "input", message: "请输入第二个答案", default: "默认值2", name: "input2" }
])
  .then((res) => {
    console.log("结果：", res);
    // 如果用户未输入时，最终结果为：{input1: '默认值1', input2: '默认值2' }
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });
  1. 第二个参数设置答案，第二个参数中对应的key将直接跳过询问，最终展示出结果，
const inquirer = require("inquirer");

const prompt = inquirer.createPromptModule();

prompt(
  [
    {
      type: "input",
      message: "请输入第一个答案",
      default: "默认值1",
      name: "input1",
    },
    {
      type: "input",
      message: "请输入第二个答案",
      default: "默认值2",
      name: "input2",
    },
  ],
  { input1: 12 }
)
  .then((res) => {
    console.log("结果：", res);
    // 直接跳到第二个问题，未输入时最终结果为：{input1: 12, input2: '默认值2' }
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });

4.第一个参数关键字段解析

  1. type 类型[input, number, confirm, list, rawlist, expand, checkbox, password, editor] 定义问题的类型
  2. message 类型[string|Function] 描述问题
  3. default 类型[string|Number|Boolean|Array|Function] 默认回答
  4. name 类型[string] 返回结果的属性
  5. validate 类型[(input, answers) => boolean] 验证输入，返回true时程序继续往下运行
  6. filter 类型[(input, answers) => answers] 过滤答案
  7. transformer 类型[(input, answers,flags: {isFinal?: boolean | undefined}) => showanswers] 修改用户的输入(只影响终端显示，不影响.then拿到的结果)
  8. prefix 类型[string] 拼接到message的前缀
  9. suffix 类型[string] 拼接到message的后缀
  10. choices 类型[string] 列表类似的type 有效
  11. when 类型[Function|Boolean] 如果某一个问题返回false将终止问答
  12. pageSize 类型[Number] 列表类型的type 展示几项，超过的先隐藏，可以上下键展示
  13. loop 类型[Boolean] 当列表隐藏项切换到最后一条时是否切换到第一条

number

const inquirer = require("inquirer");

const prompt = inquirer.createPromptModule();

prompt(
  [
    {
      type: "number",
      message: "请输入一个数字",
      name: "number",
    }
  ]
)
  .then((res) => {
    console.log("结果：", res);
    // 未输入且无默认值时，或者输入非数字时，结果为：{number: NaN }
    // 输入0.12时，结果为：{number: 0.12 }
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });

confirm

const inquirer = require("inquirer");

const prompt = inquirer.createPromptModule();

prompt([
  {
    type: "confirm",
    message: "你是否是富翁？",
    name: "isRich",
  },
])
  .then((res) => {
    console.log("结果：", res);
    // 未输入或者输入y时结果为：{isRich: true }
    // 输入n时结果为：{isRich: false }
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });

list/rawlist

const inquirer = require("inquirer");

const prompt = inquirer.createPromptModule();

prompt([
  {
    type: "list",
    message: "请选择喜欢的水果？",
    name: "fruit",
    pageSize: 2,
    loop: false,
    choices: [
      {
        name: "apple",
        value: "1",
      },
      {
        name: "pear",
        value: "2",
      },
      {
        type: "separator",
      },
      {
        name: "apricot",
        value: "3",
      },
    ],
  },
])
  .then((res) => {
    console.log("结果：", res);
    // pageSize 默认显示2条数据, 点击下键显示下一条数据
    // loop 当切换到最后一条时不再切换（设置为true时会切换到第一条，默认是true）
    // apricot 显示为分割线（无法选中，只是分割列表展示）
    // 默认选择是第一个，结果为：{fruit: "1" }
    // 如果choices未设置value 时结果：{fruit："apple" }
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });

expand 只能通过输入key 去选择，并且key 只能是单个字母且不能是h字符（输入h会展示所有项）

注意：choices 的单个对象的属性分别是key、value，这和list不一样

const inquirer = require("inquirer");

const prompt = inquirer.createPromptModule();

prompt([
  {
    type: "expand",
    message: "请选择喜欢的水果？",
    name: "fruit",
    choices: [
      {
        key: "a",
        value: "1",
      },
      {
        key: "p",
        value: "2",
      },
      {
        key: "d",
        value: "3",
      },
      {
        key: "f",
        value: "3",
      },
    ],
  },
])
  .then((res) => {
    console.log("结果：", res);
    // 未输入时点击回车也会列出所有可输入项
    // 输入a时最终结果为：{fruit: "1" }
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });

checkbox 多选通过 a 进行全选，通过 i 进行反选, (点击空格选中/取消选中) ,同样支持pageSize/loop 属性

const inquirer = require("inquirer");

const prompt = inquirer.createPromptModule();

prompt([
  {
    type: "checkbox",
    message: "请选择喜欢的水果？",
    name: "fruit",
    // loop： false,
    choices: [
      {
        name: "a",
        value: "1",
        checked: true, // 默认选中
      },
      {
        name: "p",
        value: "2",
      },
      {
        name: "d",
        value: "3",
      },
      {
        name: "f",
        value: "4",
      },
    ],
  },
])
  .then((res) => {
    console.log("结果：", res);
    // 未选择任何选项时，结果为：{fruit: [] }
    // 选择f,d选项时，结果为：{fruit: ["3","4"] }
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });

password

const inquirer = require("inquirer");

const prompt = inquirer.createPromptModule();

prompt([
  {
    type: "password",
    message: "请输入喜欢的水果？",
    name: "fruit",
  },
  {
    type: "password",
    message: "请输入喜欢的水果？",
    name: "fruit-mask",
    mask: true,
  },
])
  .then((res) => {
    console.log("结果：", res);
    // 第一个问题输入时，终端无任何反应，点击回车切换到第二个问题
    // 第二个问题输入时，终端显示*符号，数量对应输入的字符个数
    // 结果： { fruit: 输入的值, 'fruit-mask': 输入的值 }
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });

editor 注意打开的笔记本的编码格式，如果中文出现乱码，可以切换笔记本编码格式UTF-8

const inquirer = require("inquirer");

const prompt = inquirer.createPromptModule();

prompt([
  {
    type: "editor",
    message: "点击回车打开笔记本",
    name: "fruit",
  },
])
  .then((res) => {
    console.log("结果：", res);
    // 运行命令后，点击回车会打开电脑自带的笔记本
    // 笔记本输入字符后点击关闭
    // 结果： { fruit: 笔记本中输入的值 }
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });

when

const inquirer = require("inquirer");

const prompt = inquirer.createPromptModule();

prompt([
  {
    type: "input",
    message: "请输入",
    name: "fruit",
  },
  {
    type: "number",
    message: "请输入",
    name: "fruit-number",
    when: (answers) => { 
      console.log(answers);
      return answers.fruit; // 关键代码
    },
  },
])
  .then((res) => {
    console.log("结果：", res);
    // 如果第一个未输入，程序直接终止，返回 { fruit: "" }
    // 如果第一个输入有值，则会进入第二个问题
  })
  .catch((err) => {
    console.error("错误信息：", err);
  });

如果文档感觉不好理解，也可以拉取案例本地运行

git clone https://gitee.com/luocheng-fu/inquirer-demo.git

以上则是 inquier 常用的方法以及涉及到的参数，刚刚接触，学识较浅，有不合适的地方希望各路大神多多指导

参考好文推荐

  1. npm官网对应链接
  2. 【架构师（第十二篇）】脚手架之命令行交互工具 inquirer.js 使用方法
avatar
文章
阅读
粉丝