前言
在前端开发中，我们常常需要用户输入数据，以便进行后续的操作。常见的做法是使用 prompt 弹出框来输入，但这种做法存在很多局限性，比如操作体验不好、难以验证用户输入的合法性等。在这种情况下，第三方库 inquirer 应运而生，它提供了一套更为强大、更为灵活的交互式命令行用户界面。
本文介绍了如何使用 inquirer 的一个衍生库 @porketta.io/inquirer，以及如何在你的前端项目中使用它来优化用户输入的体验。
安装
首先，你需要使用 npm 安装 @porketta.io/inquirer：
npm install @porketta.io/inquirer
安装完成之后，你就可以开始使用该库了。
示例
教程中的示例代码都是大红色的。
基本用法
先看一个最简单的例子：
-- -------------------- ---- -------
----- - ------ - - ---------------------------------
----- --------- - -
-
----- --------
-------- -----------
----- ------
--
-
----- -------
-------- -----------
-------- -
----
---
--
----- --------
-
--
-----------------
------------- -- -
---------------------
---在这个例子中，我们用 Prompt(questions) 来启动一次交互式的命令行界面，用户需要依次回答 name 和 gender 两个问题。根据用户的回答，最终返回一个包含回答内容的对象 {name: 'xxx', gender: 'xxx'}。我们可以打印出这个对象以观察用户的回答。
需要注意的是，我们在 questions 数组中定义了两个问题，一个是通过 input 类型获取用户输入姓名，另一个是通过 list 类型让用户选择性别。choices 属性用于定义某些类型（如 list）的选项，它是一个数组，数组中的元素即为选项的文本。
高级用法
虽然 inquirer 库提供了很多类型和选项，但我们有时候需要更加灵活的控制，以便更好地满足我们的需求。在 @porketta.io/inquirer 中，我们可以使用 Adaptor 和 Controller 两个类来实现这种灵活性。
Adaptor 可以让我们自定义一些新的 type，同时也可以修改已经存在的类型。比如，我们可以编写一个 age 类型，以便让用户输入他们的年龄。
-- -------------------- ---- -------
----- - -------- ------ - - ---------------------------------
-----------------
----- ------
--------- ----- -- -
------ ------------------- - ---- - -------------
-
---
----- --------- - -
-
----- --------
-------- ---------------
----- -----
-
--
-----------------
------------- -- -
---------------------
---在这个例子中，我们通过 Adaptor.addType() 函数来新建了一个 age 类型，它需要检查用户输入的字符串是否全是数字字符。如果不是，就返回错误提示信息。用户通过键盘输入数字之后，回车即可提交答案，最终我们将用户的回答输出到控制台上。
和上面的例子类似，我们同样可以使用其他类型，比如 checkbox 类型、password 类型等。
除了 Adaptor，我们还可以使用 Controller 类来控制每一步问答的流程。下面是一个例子：
-- -------------------- ---- -------
----- - ----------- ------ - - ---------------------------------
----- --------- - -
-
----- --------
-------- -----------
----- ------
--
-
----- -------
-------- -----------
-------- -
----
---
--
----- --------
--
-
----- -------
-------- ------------
-------- -
-------
--------
-----
--
----- ----------
--
-
----- --------
-------- ----------------
----- --------
-
--
----- ---------- - --- ----------------------
------------------
------------- -- -
---------------------
---在这个例子中，我们首先定义了一个数组 questions，里面包含了四个问题。接着，我们通过 new Controller(questions) 新建了一个 Controller 对象，用于管理一组问题的提出与回答。
start() 函数是启动整个流程的函数，它会按照 questions 数组中定义的顺序一个一个地提出问题，等待用户依次回答。在第一次提问之前，我们还可以调用一个叫做 beforeStart() 的钩子函数来处理一些初始化工作。
Controller 类还提供了一批其他的钩子函数，比如 beforeAsk()、afterAsk()、beforeAnswer()、afterAnswer() 等等。这些函数可以让我们在整个流程中插入自己的逻辑代码。需要注意的是，这些钩子函数内部都需要返回一个 Promise，以便让整个流程进行等待。
结语
本文介绍了 @porketta.io/inquirer 这个库的使用方法，包括了基本用法和高级用法。通过这个库，我们能够以更加优秀的用户体验来获取用户输入的数据。如果你需要更多的帮助，可以查看该库的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822dbc