Ink：用 React 写命令行界面

文章目录Ink用 React 写命令行界面1、 解决什么问题2、 哪些项目在用它3、 怎么用4、 核心组件5、 Hooks6、 测试7、 上手建议Ink用 React 写命令行界面Ink 在 GitHub 上已经拿到 39K Star 了。这个项目做的事情很直接让你用 React 的方式来写命令行工具。你在浏览器里用 React 怎么写组件用 Ink 在终端里就怎么写。1、 解决什么问题写命令行工具界面部分一直是个麻烦事。终端不像浏览器有 DOM没有 CSS布局全靠手动算空格和换行。想做个进度条、表格、或者多列布局要么用字符画硬拼要么找一个封装好的库然后被它有限的 API 绑死。Ink 换了个思路把终端当成渲染目标接入 React 的组件体系。你写的还是 JSX用的还是 useState、useEffect 这些 hooks只不过最终输出到的是终端而不是浏览器窗口。底层用的是 Facebook 开源的 Yoga 引擎来做 Flexbox 布局CSS 里的那些对齐、间距、方向属性在终端里全部生效。不用再去数空格和换行了。2、 哪些项目在用它判断一个开源项目靠不靠谱看谁在用就知道了。Claude Code 是 Anthropic 出的 AI 编程工具命令行界面就是用 Ink 搭的。Google 的 Gemini CLI 同样如此。GitHub Copilot CLI、Shopify CLI、Cloudflare 的 Wrangler、Prisma、Gatsby 这些项目也都在用。一个库能同时被 Anthropic 和 Google 选中做自家 CLI 产品的底层说明它在稳定性和可维护性上是过了关的。除了大厂的 AI 工具还有很多社区项目也在用。Shopify 用它做电商平台的命令行管理工具Cloudflare 用它做 Workers 的部署工具 WranglerPrisma 用它做数据库 ORM 的交互界面。从开发工具到电商平台从云服务到数据库Ink 的应用场景比想象中要广。3、 怎么用安装npminstallink react写一个最简单的计数器import React, {useState, useEffect} from react; import {render, Text} from ink; const Counter () { const [counter, setCounter] useState(0); useEffect(() { const timer setInterval(() { setCounter(prev prev 1); }, 100); return () clearInterval(timer); }, []); return Text colorgreen{counter} tests passed/Text; }; render(Counter /);这段代码如果你写过 React一眼就能看懂。没有新概念没有新语法React 的知识直接复用。4、 核心组件Ink 提供的组件不多但覆盖了终端 UI 的主要场景。Text负责文字渲染支持颜色、粗体、斜体、下划线、删除线底层用的是 chalk。Box是布局容器你在 CSS 里用过的 flexDirection、justifyContent、alignItems、padding、margin 这些属性都能直接用。Newline插入换行Spacer填充剩余空间Static渲染不需要更新的内容适合放日志这种只增不改的信息。所有文字必须包在Text里Box不能嵌套在Text里。记住这两条规则就不会踩坑。5、 HooksInk 提供了一组专用 hooks。useInput监听键盘输入拿到用户按了哪个键。useApp控制应用生命周期可以主动退出程序。useFocus管理焦点让组件能响应方向键切换。useWindowSize获取终端窗口尺寸窗口大小变了组件会自动重渲染。useStdin和useStdout可以直接操作标准输入输出流。这些 hooks 的命名和用法跟 React 生态保持一致上手成本很低。6、 测试Ink 内置了测试支持。它提供了一个render方法返回的对象上面有lastFrame()和rerender()等方法可以直接断言组件的输出文本不需要启动真实的终端进程。这对写 CLI 工具来说是个实际的好处终端程序以前很难做自动化测试要么靠人眼看着对不对要么写一堆 mock 来模拟输出。Ink 把这个问题解决了组件的渲染结果可以直接拿来断言。7、 上手建议用create-ink-app脚手架最快npx create-ink-app my-ink-cli加 TypeScriptnpx create-ink-app--typescriptmy-ink-cli如果你之前写过 ReactInk 的学习曲线很平。它没有引入新的编程范式只是把渲染目标从浏览器换成了终端。你需要额外了解的只有几个终端特有的属性比如Box的 borderStyle 和Text的 color。对于想用 Node.js 写命令行工具又不想在终端布局上花太多时间的人来说Ink 是一个实际可用的选择。它把 React 生态的组件化、状态管理、测试能力完整搬到了终端里不用学新东西直接用已有的 React 知识就能开工。写命令行工具又不想在终端布局上花太多时间的人来说Ink 是一个实际可用的选择。它把 React 生态的组件化、状态管理、测试能力完整搬到了终端里不用学新东西直接用已有的 React 知识就能开工。