ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

@inquirer/input 实战指南:用 Inquirer.js 构建带校验、过滤与转换的交互式命令行文本输入

@inquirer/input 实战指南:用 Inquirer.js 构建带校验、过滤与转换的交互式命令行文本输入 CLI开发工具【免费下载链接】Inquirer.jsA collection of common interactive command line user interfaces.项目地址https://gitcode.com/gh_mirrors/in/Inquirer.js点击查看免费下载inquirer/input是 Inquirer.js 多包仓库中负责自由文本输入的核心提示组件用于在命令行界面中接收用户任意字符串并原生支持校验validation、过滤filtering、格式转换transformation与主题定制。读完本文你将掌握如何安装与调用该组件、逐项配置message、default、prefill、required、transformer、validate、pattern等全部选项并能深入理解其基于inquirer/core钩子机制的内部实现与运行原理。一、组件定位与安装inquirer/input是 Inquirer.js monorepo 中的一个独立子包版本见 packages/input/package.json它被 packages/prompts/src/index.ts 统一导出同时也提供单包安装入口。组件只依赖inquirer/core^12.0.3与inquirer/type^4.1.1运行时要求 Node.js23.5.0 || ^22.13.0 || ^20.17.0。两种安装方式等价任选其一# 方式一通过聚合包 inquirer/prompts推荐可同时使用 select、confirm 等全部提示组件 npm install inquirer/prompts # 或 yarn add inquirer/prompts # 方式二单独安装 input 子包 npm install inquirer/input # 或 yarn add inquirer/input二、基本用法无论是从聚合包还是子包导入调用方式完全一致import { input } from inquirer/prompts; // 或 // import input from inquirer/input; const answer await input({ message: Enter your name });input是一个返回Promisestring的异步函数await后即可拿到用户最终提交的字符串。仓库中提供了可直接运行的完整示例见 packages/inquirer/examples/input.ts演示了多个 input 提问串联、动态默认值、transformer 与手机号校验和 packages/demo/src/demos/input.ts演示了默认值、hex 颜色校验、3 秒慢速异步校验。在inquirer.prompt([...])数组形式的经典用法中只需把type指定为input即可复用同一组件import inquirer from inquirer; const answers await inquirer.prompt([ { type: input, name: first_name, message: Whats your first name }, { type: input, name: last_name, message: Whats your last name, default() { return Doe; }, }, ]);三、Options 完整参数说明input的全部配置项如下表与 packages/input/README.md 保持一致并结合源码 packages/input/src/index.ts 中的InputConfig类型逐一印证属性类型必填说明messagestring是向用户提出的问题文本defaultstring否未作答时的默认值其行为受prefill选项控制见下prefilltab \| editable否默认tab。设为tab时按backspace会清空默认值按tab则把默认值内联到输入框供编辑设为editable时默认值直接内联显示、立即可编辑requiredboolean否默认false。设为true后空值undefined/空字符串不会被接受transformer(string, { isFinal: boolean }) string否转换/格式化用户输入的原始值提示完成后isFinal为true。该函数仅影响显示最终答案仍需在业务代码中自行处理validatestring boolean \| string \| Promiseboolean \| string否提交时校验过滤后的内容返回字符串时该字符串会作为错误信息展示给用户。注意若返回rejectedpromise会被视为代码错误并导致崩溃应返回 resolve 的字符串来报错patternRegExp否用于校验输入的正则表达式不匹配时校验失败并展示patternError指定的错误信息patternErrorstring否输入不匹配pattern时显示的错误信息默认Invalid inputtheme见 Theming否定制提示的外观样式3.1 默认值行为default与prefill的配合从源码看默认值会被强制转为字符串String(config.default ?? )见 packages/input/src/index.ts因此即使运行时传入数字默认值也能正确显示测试 packages/input/input.test.ts 验证了default: 3042最终答案为字符串3042。prefill的三种状态在 packages/input/src/index.ts 中通过useKeypress与useEffect实现tab默认向后兼容界面先显示(默认值)占位样式由defaultAnswer控制按backspace清空默认值按tab将默认值内联进输入框供编辑。测试覆盖见 packages/input/input.test.ts。editable挂载时通过useEffect直接执行rl.write(defaultValue)默认值从一开始就内联在输入框中可立即修改无需先按tab此时再按tab不会重复内联packages/input/input.test.ts。未提供default无论哪种prefill模式tab都不产生任何效果行为与普通输入一致packages/input/input.test.ts。3.2 提交时的校验流水线required → pattern → validateinput在按回车提交后按固定顺序执行三层校验见 packages/input/src/index.tsrequired值为空时返回内置错误You must provide a valuepatternpattern.test(value)失败时返回patternError默认Invalid inputvalidate若提供了该函数await config.validate(value)返回 falsy 时兜底为You must provide a valid value。三者均通过后答案才被写入并进入done状态。校验支持同步与异步Promise测试 packages/input/input.test.ts 分别验证了同步校验、异步校验与错误提示展示packages/demo/src/demos/input.ts 则演示了 3 秒延迟的异步校验期间提示进入loading状态并显示 spinner。3.3 transformer 与 pattern 的典型组合transformer只在渲染层生效配合pattern/validate可实现输入时实时美化、提交时严格校验的体验。参考 packages/inquirer/examples/filter-validate-progress.ts 与 demo 中的 hex 颜色输入示例const hexRegEx /(\d|[a-f])/gim; const isHex (value) (value.match(hexRegEx) || []).length value.length (value.length 3 || value.length 6); const answer await input({ message: Enter an hex color?, transformer(value , { isFinal }) { return isFinal ? styleText(underline, value) : value; // 提交后加下划线 }, validate: (value ) isHex(value) || Pass a valid hex value, });四、底层实现原理基于 inquirer/core 钩子inquirer/input本身是一个薄封装全部逻辑构建在 packages/core/src/lib/create-prompt.ts 提供的createPrompt之上核心状态与按键处理如下对应 packages/input/src/index.ts状态机status仅在idle | loading | done间流转。按回车后先置为loading显示 spinner校验通过置done并调用done(answer)结束失败则回到idle并渲染错误信息。按键分发useKeypress订阅 readline 的keypress事件实现见 packages/core/src/lib/use-keypress.ts由isEnterKey/isBackspaceKey/isTabKey见 packages/core/src/lib/key.ts区分处理其余按键通过rl.line实时同步value并清空错误。校验失败后的编辑体验当validationFailureMode为默认的keep时校验失败后执行rl.write(value)把刚才输入的内容写回输入框用户可以直接修改而非重新输入源码注释明确说明了这一设计意图测试 packages/input/input.test.ts 还验证了光标位置在编辑过程中被正确追踪。五、Theming 主题定制主题定制通过在选项里传入theme对象实现只需包含要修改的键其余部分自动回退到默认值合并逻辑由 packages/core/src/lib/make-theme.ts 的deepMerge完成。完整主题类型定义如下type Theme { prefix: string | { idle: string; done: string }; spinner: { interval: number; frames: string[]; }; style: { answer: (text: string) string; message: (text: string, status: idle | done | loading) string; error: (text: string) string; defaultAnswer: (text: string) string; }; validationFailureMode: keep | clear; };各字段的默认实现定义在 packages/core/src/lib/theme.tsprefix在 idle 时为蓝色?、done 时为绿色✔style.answer默认青色高亮答案style.message默认加粗style.error默认红色并以前缀展示style.defaultAnswer默认以灰色括号(默认值)展示。validationFailureMode决定提交值非法时提示的行为keep默认保留当前输入值允许用户继续编辑修正clear清空输入框重置为空字符串后让用户重新输入。该行为在 packages/input/src/index.ts 中实现并被测试 packages/input/input.test.ts 验证clear模式下失败后屏幕回到无内容的提问行而keep模式会保留已输入字符。主题化示例完整用例见 packages/input/input.test.tsconst answer await input({ message: Answer must be: 2, validate: (value) value 2, theme: { prefix: Q:, style: { message: (text) ${text} , error: (text) !! ${text} !!, answer: (text) _${text}_, }, }, });六、LicenseCopyright (c) 2023 Simon Boudrias — Licensed under the MIT license。赞分享CLI开发工具【免费下载链接】Inquirer.jsA collection of common interactive command line user interfaces.项目地址https://gitcode.com/gh_mirrors/in/Inquirer.js点击查看免费下载相关推荐Inquirer.js 交互式命令行界面开发指南inquirer/prompts 从入门到进阶实战Inquirer.js 交互式命令行界面开发指南inquirer/prompts 从入门到进阶实战 Inquirer.js 是 Node.js 生态中一套成CLI开发工具Rich Prompt 交互式输入指南用 Python 构建带校验的终端问答Rich Prompt 交互式输入指南用 Python 构建带校验的终端问答 Rich 提供的 rich/prompt.py https://link.gitInquirer.js 国际化指南使用 inquirer/i18n 实现命令行提示的本地化Inquirer.js 国际化指南使用 inquirer/i18n 实现命令行提示的本地化 inquirer/i18n 是 Inquirer.js 官方提CLI开发工具上一篇OmniRoute A2A Server 接入指南通过 Agent-to-Agent 协议 v0.3 将智能路由、配额与健康能力开放给任意 Agent下一篇Proxmark3 RDV4 完整指南256KB SPI 闪存与可调天线怎么用创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表