如何使用Inquirer.js创建交互式命令行提示

来自菜鸟教程
跳转至:导航、​搜索

介绍

Inquirer.js 是常用交互式命令行用户界面的集合。 这包括键入问题的答案或从列表中选择一个选项。

inquirer 包提供了几个默认提示并且是高度可配置的。 它也可以通过插件接口进行扩展。 它甚至支持 Promise 和 async/await 语法。

在本文中,您将安装和探索 Inquirer.js 的一些功能。

先决条件

如果您想继续阅读本文,您将需要:

  • Node.js 的本地开发环境。 关注【X7X】如何安装Node.js并创建本地开发环境【X76X】。

本教程已使用 Node v15.14.0、npm v7.10.0 和 inquirer v8.0.0 进行了验证。

第 1 步 — 设置项目

首先,打开终端窗口并创建一个新的项目目录:

mkdir inquirer-example

然后,导航到此目录:

cd inquirer-example

要开始向您的 Node.js 脚本添加提示,您需要安装 inquirer 包:

npm install inquirer

此时,您已经准备好使用 Inquirer.js 的新项目。

第 2 步 — 创建提示

现在,在您的项目目录中创建一个新的 index.js 文件并使用代码编辑器打开它。

在您的脚本中,请确保需要 inquirer

index.js

const inquirer = require('inquirer');

添加一个提示,询问用户他们最喜欢的爬行动物:

index.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      name: 'faveReptile',
      message: 'What is your favorite reptile?'
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.faveReptile);
  });

重新访问您的终端窗口并运行脚本:

node index.js

您将看到一个提示:

Output? What is your favorite reptile?

提供答案将显示响应:

Output? What is your favorite reptile? Crocodiles
Answer: Crocodiles

您可以提供一个 default 值,允许用户在不提交任何答案的情况下按下 ENTER

index.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      name: 'faveReptile',
      message: 'What is your favorite reptile?',
      default: 'Alligators'
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.faveReptile);
  });

再次运行脚本,您将看到一个提示:

Output? What is your favorite reptile? (Alligators)

在没有答案的情况下按 ENTER 将提交默认答案:

Output? What is your favorite reptile? Alligators
Answer: Alligators

现在,您可以创建提示并设置默认值。

第 3 步 - 创建多个提示

您可能已经注意到 .prompt() 方法接受一个数组或对象。 这是因为您可以将一系列提示问题串在一起,并且一旦解决了所有提示,所有答案都将按名称作为 answers 变量的一部分提供。

在您的代码编辑器中重新访问 index.js 并添加一个提示,询问用户他们最喜欢的颜色:

index.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      name: 'faveReptile',
      message: 'What is your favorite reptile?',
      default: 'Alligators'
    },
    {
      name: 'faveColor',
      message: 'What is your favorite color?',
      default: '#008f68'
    },
  ])
  .then(answers => {
    console.info('Answers:', answers);
  });

再次运行脚本,您将看到两个提示:

Output? What is your favorite reptile? Alligators
? What is your favorite color? #008f68
Answers: { faveReptile: 'Alligators', faveColor: '#008f68' }

现在,您可以创建多个提示。

第 4 步 — 使用列表、原始列表、可扩展列表、复选框、密码和编辑器

inquirer 不仅支持提示用户输入文本。 举例来说,以下类型将单独展示,但您可以通过将它们传递到同一个数组中来将它们链接在一起。

列表

list 类型允许您向用户提供一组固定的选项供您选择,而不是像 input 类型提供的自由格式输入:

列表.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'list',
      name: 'reptile',
      message: 'Which is better?',
      choices: ['alligator', 'crocodile'],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptile);
  });

重新访问您的终端窗口并运行脚本:

node list.js

您将看到 list 提示:

Output? Which is better? (Use arrow keys)
❯ alligator
  crocodile

用户可以通过 ARROW UPARROW DOWN 键来浏览选项列表。 jk 键盘导航也可用。

原始清单

rawlist 类型类似于 list。 它显示一个选项列表并允许用户输入他们选择的索引(从 1 开始):

rawlist.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'rawlist',
      name: 'reptile',
      message: 'Which is better?',
      choices: ['alligator', 'crocodile'],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptile);
  });

重新访问您的终端窗口并运行脚本:

node list.js

您将看到 rawlist 提示:

Output? Which is better?
  1) alligator
  2) crocodile
  Answer:

提交无效值将导致 "Please enter a valid index" 错误。

可扩展列表

expand 类型让人想起一些命令行应用程序,这些应用程序为您提供了一个字符列表,这些字符映射到可以输入的功能。 expand 提示最初将向用户显示可用字符值的列表,并在按下键时为它们提供上下文:

扩展.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'expand',
      name: 'reptile',
      message: 'Which is better?',
      choices: [
        {
          key: 'a',
          value: 'alligator',
        },
        {
          key: 'c',
          value: 'crocodile',
        },
      ],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptile);
  });

重新访问您的终端窗口并运行脚本:

node expand.js

您将看到 expand 提示:

Output? Which is better? (acH)

默认情况下,包含 H 选项,它代表 "Help",输入 H 并点击 ENTER 将切换到选项列表,索引为然后可以输入它们的字符以进行选择。

Output? Which is better? (acH)
  a) alligator
  c) crocodile
  h) Help, list all options
  Answer:

提交无效值将导致 "Please enter a valid command" 错误。

复选框

checkbox 类型也类似于 list。 它允许您选择多个选项,而不是单个选择。

复选框.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'checkbox',
      name: 'reptiles',
      message: 'Which reptiles do you love?',
      choices: [
        'Alligators', 'Snakes', 'Turtles', 'Lizards',
      ],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptiles);
  });

重新访问您的终端窗口并运行脚本:

node checkbox.js

您将看到 checkbox 提示:

Output? Which reptiles do you love? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Alligators
 ◯ Snakes
 ◯ Turtles
 ◯ Lizards

与其他 list 类型类似,您可以使用箭头键进行导航。 要进行选择,您可以点击 SPACE,也可以使用 a 选择全部或使用 i 反转您的选择。

OutputAnswer: [ 'Alligators', 'Snakes', 'Turtles', 'Lizards' ]

与其他提示类型不同,此提示类型的答案将返回一个数组而不是字符串。 即使用户选择不选择任何项目,它也将始终返回一个数组。

密码

password 类型将对用户隐藏输入。 这允许用户提供不应该看到的敏感信息:

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'password',
      name: 'secret',
      message: 'Tell me a secret',
    },
  ])
  .then(answers => {
    // Displaying the password for debug purposes only.
    console.info('Answer:', answers.secret);
  });

重新访问您的终端窗口并运行脚本:

node password.js

您将看到 password 提示:

Output? Tell me a secret [hidden]

输入对用户隐藏。

编辑

editor 类型允许用户使用他们的默认文本编辑器来输入更大的文本。

编辑器.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'editor',
      name: 'story',
      message: 'Tell me a story, a really long one!',
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.story);
  });

重新访问您的终端窗口并运行脚本:

node editor.js

您将看到 editor 提示:

Output? Tell me a story, a really long one! Press <enter> to launch your preferred editor.

inquirer 将尝试根据 $EDITOR$VISUAL 环境变量的值在用户系统上打开文本编辑器。 如果两者都不存在,将使用 vim (Linux) 和 notepad.exe (Windows) 代替。

结论

在本文中,您安装并探索了 Inquirer.js 的一些功能。 此工具可用于从用户检索信息。

使用一些 插件 继续学习。 像 inquirer-autocomplete-promptinquirer-search-listinquirer-table-prompt