如何使用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 UP 和 ARROW DOWN 键来浏览选项列表。 j 和 k 键盘导航也可用。

原始清单

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-prompt、inquirer-search-list 和 inquirer-table-prompt。