介绍
Inquirer.js是一组常见的交互式命令行用户界面,其中包括键入问题答案或从列表中选择一个选择。
Inquirer包提供多个默认提示,并且高度可配置,还可以通过插件界面扩展,甚至支持承诺和async/await语法。
在本文中,您将安装和探索Inquirer.js的一些功能。
前提条件
如果您想跟随这篇文章,您将需要:
- Node.js 的本地开发环境 遵循 如何安装 Node.js 并创建本地开发环境。
本教程已通过 Node v15.14.0、npm v7.10.0 和 inquirer v8.0.0 进行验证。
步骤1 - 设置项目
首先,打开终端窗口并创建一个新的项目目录:
1mkdir inquirer-example
然后,导航到此目录:
1cd inquirer-example
要开始向 Node.js 脚本添加提示,您需要安装查询包:
1npm install inquirer
在此时刻,你有一个新的项目,可以使用Inquirer.js。
步骤二:创建快门
现在,在项目目录中创建一个新的 index.js 文件,并使用代码编辑器打开它。
在你的脚本中,请确保要求调查员:
1[label index.js]
2const inquirer = require('inquirer');
添加一个提示,问用户他们最喜欢的爬行动物:
1[label index.js]
2const inquirer = require('inquirer');
3
4inquirer
5 .prompt([
6 {
7 name: 'faveReptile',
8 message: 'What is your favorite reptile?'
9 },
10 ])
11 .then(answers => {
12 console.info('Answer:', answers.faveReptile);
13 });
查看您的终端窗口并运行脚本:
1node index.js
你将被介绍一个快速:
1[secondary_label Output]
2? What is your favorite reptile?
提供一个答案将显示答案:
1[secondary_label Output]
2? What is your favorite reptile? Crocodiles
3Answer: Crocodiles
您可以提供一个默认值,允许用户在不提交任何答案的情况下按ENTER:
1[label index.js]
2const inquirer = require('inquirer');
3
4inquirer
5 .prompt([
6 {
7 name: 'faveReptile',
8 message: 'What is your favorite reptile?',
9 default: 'Alligators'
10 },
11 ])
12 .then(answers => {
13 console.info('Answer:', answers.faveReptile);
14 });
再次运行脚本,您将收到一个提示:
1[secondary_label Output]
2? What is your favorite reptile? (Alligators)
按下ENTER没有答案将提交默认答案:
1[secondary_label Output]
2? What is your favorite reptile? Alligators
3Answer: Alligators
现在,您可以创建提示并设置默认值。
步骤3 - 创建多重 Prompts
您可能已经注意到 .prompt() 方法接受一个数组或对象,这是因为您可以连接一系列提示问题,所有答案将以名称作为答案变量的一部分,一旦所有提示被解决。
在代码编辑器中修复index.js,并添加提示,请用户选择他们最喜欢的颜色:
1[label index.js]
2const inquirer = require('inquirer');
3
4inquirer
5 .prompt([
6 {
7 name: 'faveReptile',
8 message: 'What is your favorite reptile?',
9 default: 'Alligators'
10 },
11 {
12 name: 'faveColor',
13 message: 'What is your favorite color?',
14 default: '#008f68'
15 },
16 ])
17 .then(answers => {
18 console.info('Answers:', answers);
19 });
再次运行脚本,您将收到两个提示:
1[secondary_label Output]
2? What is your favorite reptile? Alligators
3? What is your favorite color? #008f68
4Answers: { faveReptile: 'Alligators', faveColor: '#008f68' }
现在,你可以创建多个提示。
步骤 4 – 使用列表,原始列表,可扩展列表,检查框,密码和编辑器
例如,以下类型将由自己展示,但您可以通过将它们传递到相同的阵列来链接它们。
列表
列表类型允许您向用户提供一组固定的选项,而不是作为输入类型提供的免费表单输入:
1[label list.js]
2const inquirer = require('inquirer');
3
4inquirer
5 .prompt([
6 {
7 type: 'list',
8 name: 'reptile',
9 message: 'Which is better?',
10 choices: ['alligator', 'crocodile'],
11 },
12 ])
13 .then(answers => {
14 console.info('Answer:', answers.reptile);
15 });
查看您的终端窗口并运行脚本:
1node list.js
您将收到一个列表提示:
1[secondary_label Output]
2? Which is better? (Use arrow keys)
3❯ alligator
4 crocodile
用户可以使用ARROW UP和ARROW DOWN键导航选项列表,也可以使用j和k键盘导航。
Raw 列表
rawlist类型类似于list,它显示了选项列表,并允许用户输入他们选择的索引(从1开始):
1[label rawlist.js]
2const inquirer = require('inquirer');
3
4inquirer
5 .prompt([
6 {
7 type: 'rawlist',
8 name: 'reptile',
9 message: 'Which is better?',
10 choices: ['alligator', 'crocodile'],
11 },
12 ])
13 .then(answers => {
14 console.info('Answer:', answers.reptile);
15 });
查看您的终端窗口并运行脚本:
1node list.js
您将收到一个Rowlist提示:
1[secondary_label Output]
2? Which is better?
3 1) alligator
4 2) crocodile
5 Answer:
提交无效值会导致请输入有效索引错误。
可扩展名单
扩展类型让人想起一些命令行应用程序,这些应用程序会为您提供一个可以输入功能的字符列表。 扩展提示将最初向用户提供可用的字符值列表,并在按下密钥时为它们提供背景:
1[label expand.js]
2const inquirer = require('inquirer');
3
4inquirer
5 .prompt([
6 {
7 type: 'expand',
8 name: 'reptile',
9 message: 'Which is better?',
10 choices: [
11 {
12 key: 'a',
13 value: 'alligator',
14 },
15 {
16 key: 'c',
17 value: 'crocodile',
18 },
19 ],
20 },
21 ])
22 .then(answers => {
23 console.info('Answer:', answers.reptile);
24 });
查看您的终端窗口并运行脚本:
1node expand.js
您将收到一个扩展提示:
1[secondary_label Output]
2? Which is better? (acH)
默认情况下,包含了代表帮助的H选项,在输入H并点击ENTER时,将切换到一个选项列表,由其字符索引,然后可以输入以进行选择。
1[secondary_label Output]
2? Which is better? (acH)
3 a) alligator
4 c) crocodile
5 h) Help, list all options
6 Answer:
提交无效值会导致请输入有效命令错误。
检查箱
检查框类型也类似于列表,而不是单个选择,它允许您选择多个选择。
1[label checkbox.js]
2const inquirer = require('inquirer');
3
4inquirer
5 .prompt([
6 {
7 type: 'checkbox',
8 name: 'reptiles',
9 message: 'Which reptiles do you love?',
10 choices: [
11 'Alligators', 'Snakes', 'Turtles', 'Lizards',
12 ],
13 },
14 ])
15 .then(answers => {
16 console.info('Answer:', answers.reptiles);
17 });
查看您的终端窗口并运行脚本:
1node checkbox.js
您将收到一个 checkbox提示:
1[secondary_label Output]
2? Which reptiles do you love? (Press <space> to select, <a> to toggle all, <i> to invert selection)
3❯◯ Alligators
4 ◯ Snakes
5 ◯ Turtles
6 ◯ Lizards
与其他列表类型类似,您可以使用箭头键导航。 要进行选择,您可以点击SPACE,也可以用a选择所有,或者用i逆转您的选择。
1[secondary_label Output]
2Answer: [ 'Alligators', 'Snakes', 'Turtles', 'Lizards' ]
与其他提示类型不同,这个提示类型的答案将返回一个数组而不是一个字符串. 它将始终返回一个数组,即使用户选择不选择任何项目。
密码
密码类型将隐藏用户的输入,这允许用户提供不应该看到的敏感信息:
1const inquirer = require('inquirer');
2
3inquirer
4 .prompt([
5 {
6 type: 'password',
7 name: 'secret',
8 message: 'Tell me a secret',
9 },
10 ])
11 .then(answers => {
12 // Displaying the password for debug purposes only.
13 console.info('Answer:', answers.secret);
14 });
查看您的终端窗口并运行脚本:
1node password.js
您将收到一个密码提示:
1[secondary_label Output]
2? Tell me a secret [hidden]
输入隐藏于用户。
编辑
编辑器类型允许用户使用其默认文本编辑器用于更大的文本输入。
1[label editor.js]
2const inquirer = require('inquirer');
3
4inquirer
5 .prompt([
6 {
7 type: 'editor',
8 name: 'story',
9 message: 'Tell me a story, a really long one!',
10 },
11 ])
12 .then(answers => {
13 console.info('Answer:', answers.story);
14 });
查看您的终端窗口并运行脚本:
1node editor.js
您将收到一个编辑器提示:
1[secondary_label Output]
2? 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。