Создание интерактивных запросов командной строки
Development, Java | Комментировать запись
Inquirer.js – это набор общих интерактивных пользовательских интерфейсов командной строки. Он поддерживает ввод ответов на вопросы и выбор варианта из списка.
Пакет inquirer предоставляет несколько стандартных приглашений командной строки и обладает гибкой конфигурацией. Кроме того, его функционал легко расширяется с помощью дополнительного интерфейса. Пакет даже поддерживает промисы и синтаксис async/await.
Читайте также:
В этой статье вы научитесь устанавливать Inquirer.js, а также познакомитесь с некоторыми его основными функциями.
Требования
Чтобы выполнить данный мануал, вам понадобится локальная установка Node.js (ее можно получить, следуя этим инструкциям для mac OS, Ubuntu, Debian, CentOS).
Это руководство было протестировано на версиях 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 и откройте его в редакторе кода.
В скрипте index.js обязательно укажите inquirer:
const inquirer = require('inquirer');
Далее добавьте приглашение командной строки, которое предложит пользователю ввести название его любимой рептилии:
const inquirer = require('inquirer');
inquirer
.prompt([
{
name: 'faveReptile',
message: 'What is your favorite reptile?'
},
])
.then(answers => {
console.info('Answer:', answers.faveReptile);
});
Вернитесь в терминал и запустите наш новый сценарий:
node index.js
Вы получите такое приглашение командной строки:
? What is your favorite reptile?
Введите какой-нибудь ответ, и он отобразится на экране:
? 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);
});
Снова запустите свой сценарий, и вы получите тот же запрос, но уже со стандартным ответом.
? What is your favorite reptile? (Alligators)
Если вы нажмете ввод, скрипт подставит стандартный ответ Alligators:
? What is your favorite reptile? Alligators Answer: Alligators
Теперь вы знаете, как добавить в сценарий запрос командной строки с ответом по умолчанию.
3: Создание нескольких запросов командной строки
Возможно, вы уже заметили, что метод .prompt() принимает массив или объекты. Благодаря этому мы можем объединить ряд запросов в цепочку, а все ответы будут доступны по имени как часть переменной answers после того, как все запросы будут обработаны.
Еще раз откройте 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);
});
Запустите сценарий еще раз, и вы получите от командной строки два запроса:
? What is your favorite reptile? Alligators
? What is your favorite color? #008f68
Answers: { faveReptile: 'Alligators', faveColor: '#008f68' }
Теперь вы знаете, как создать несколько приглашений командной строки.
4: Типы запросов
Пакет inquirer позволяет пользователю не только вводить текст, он поддерживает широкий ряд типов запросов: list, rawlist, expand, checkbox, password и editor. Далее мы рассмотрим каждый из них в отдельности, но вы вполне можете совместить их, передавая в одном массиве.
Тип list
Тип list позволяет вам предоставить пользователю фиксированный набор опций, из которых он может выбрать свой вариант (вместо свободного ввода, который предоставляет тип input).
Создайте файл list.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
На этот раз в приглашении командной строки вы увидите список доступных вариантов ответа:
? Which is better? (Use arrow keys) ❯ alligator crocodile
Для перемещения по списку пользователь может использовать клавиши со стрелкой вверх и вниз. Также возможна навигация с помощью клавиш j и k.
Тип rawlist
Тип 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
Вам будет представлено такое приглашение:
? Which is better? 1) alligator 2) crocodile Answer:
Отправка недопустимого значения приведет к ошибке “Please enter a valid index”.
Тип expand
Тип expand предоставляет список символов, каждый из которых связан с отдельной функцией. Чтобы выбрать ту или иную функцию, вы должны ввести соответствующий символ. Этим expand напоминает некоторые приложения командной строки. Приглашение типа 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
Вы увидите такой запрос:
? Which is better? (acH)
По умолчанию в этот тип включена опция H, что означает «Help». Введите H и нажмите ввод, чтобы переключиться на список опций. Вы увидите, что символы а и с – это индексы ответов alligator и crocodile. То есть чтобы выбрать один из этих ответов, нужно ввести соответствующий символ.
? Which is better? (acH)
a) alligator
c) crocodile
h) Help, list all options
Answer:
Отправка недопустимого значения приведет к ошибке «Please enter a valid command».
Тип checkbox
Тип checkbox также похож на list. Но вместо одного ответа он позволяет выбрать несколько вариантов.
Создайте сценарий checkbox.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
На экране появится следующее приглашение командной строки:
? Which reptiles do you love? (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◯ Alligators ◯ Snakes ◯ Turtles ◯ Lizards
Как и в других типах вопросов, здесь для навигации можно использовать клавиши со стрелками. Чтобы сделать выбор, нажмите пробел; также вы можете выбрать все варианты с помощью a (чтобы инвертировать выделение, используйте i).
Answer: [ 'Alligators', 'Snakes', 'Turtles', 'Lizards' ]
В отличие от других типов приглашений inquirer, ответ этого типа будет содержать массив, а не строку. Кроме того, ответ всегда будет представлен массивом, даже если пользователь не выбрал ни одного варианта.
Тип password
Тип password скроет ввод пользователя. Это позволяет запрашивать конфиденциальную информацию, которую не следует видеть посторонним.
Создайте скрипт password.js и вставьте в файл следующее:
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
Вам будет предложено ввести пароль:
? Tell me a secret [hidden]
Ваш ввод будет скрыт.
Тип editor
Тип editor позволяет пользователям использовать их стандартный текстовый редактор для ввода больших фрагментов текста.
Поместите такие строки в файл 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
Вам будет предложено выбрать редактор:
? 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.
Tags: Javascript, Node.js