React Ink

步子哥

React Ink 项目搭建的详细步骤。React Ink 允许您使用 React 组件模型来构建交互式的命令行界面 (CLI) 应用。

以下是项目搭建的详细步骤：

1. 创建项目目录并初始化

首先，创建一个新的项目文件夹，并使用 npm 或 yarn 初始化项目。

mkdir my-ink-app
cd my-ink-app
npm init -y

2. 安装核心依赖

安装 react 和 ink。

npm install react ink

3. 安装开发依赖

我们将使用 TypeScript 来编写代码，并使用 esbuild 进行快速打包。

npm install --save-dev typescript @types/react @types/node esbuild

4. 配置 TypeScript

生成 tsconfig.json 文件，并进行必要的配置。

npx tsc --init

打开生成的 tsconfig.json 文件，并进行以下修改（确保以下行与您的配置匹配或添加）：

{
  "compilerOptions": {
    "target": "es2021", // 目标ES版本
    "module": "commonjs", // 模块系统
    "jsx": "react-jsx", // 启用JSX转换，使用新的react-jsx transform
    "esModuleInterop": true, // 允许从CommonJS模块导入ES模块
    "forceConsistentCasingInFileNames": true, // 强制文件名大小写一致
    "strict": true, // 启用所有严格类型检查选项
    "skipLibCheck": true, // 跳过声明文件检查
    "outDir": "./dist", // 编译输出目录
    "rootDir": "./src" // 源代码根目录
  },
  "include": ["src/**/*"], // 包含src目录下的所有文件
  "exclude": ["node_modules", "dist"] // 排除node_modules和dist目录
}

5. 创建源代码文件

在 src 目录下创建您的 React Ink 组件和入口文件。

src/App.tsx (您的 React Ink 组件)

import React from 'react';
import { Text } from 'ink';

interface AppProps {
  name?: string;
}

export default function App({ name = 'World' }: AppProps) {
  return (
    <Text>
      Hello, <Text color="green">{name}</Text>!
    </Text>
  );
}

src/cli.ts (您的 CLI 入口文件，用于渲染 Ink 组件)

import React from 'react';
import { render } from 'ink';
import App from './App.js'; // 注意：esbuild 默认输出 .js 扩展名，这里需要加上

// 获取命令行参数
const args = process.argv.slice(2);
const name = args[0];

function run() {
  const { waitUntilExit } = render(<App name={name} />);
  waitUntilExit(); // 等待 Ink 应用退出
}

run();

6. 配置 `package.json` 脚本

在 package.json 中添加运行和构建脚本。

{
  "name": "my-ink-app",
  "version": "1.0.0",
  "description": "A simple React Ink CLI application.",
  "main": "dist/cli.js",
  "type": "module", // 添加这一行，让 Node.js 将 .js 文件视为 ES 模块
  "scripts": {
    "start": "node --loader ts-node/esm src/cli.ts",
    "build": "esbuild src/cli.ts --bundle --platform=node --outfile=dist/cli.js --external:ink --external:react --format=esm",
    "dev": "esbuild src/cli.ts --bundle --platform=node --outfile=dist/cli.js --external:ink --external:react --format=esm --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ink": "^4.4.1",
    "react": "^18.3.1"
  },
  "devDependencies": {
    "@types/node": "^20.14.10",
    "@types/react": "^18.3.3",
    "esbuild": "^0.23.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.5.3"
  }
}

脚本说明：

start: 使用 ts-node 直接运行 TypeScript 源文件，方便开发调试。
build: 使用 esbuild 将 src/cli.ts 打包成一个单独的 JavaScript 文件 dist/cli.js。
- --bundle: 将所有依赖打包进一个文件。
- --platform=node: 指定目标平台是 Node.js。
- --outfile=dist/cli.js: 指定输出文件。
- --external:ink --external:react: 将 ink 和 react 标记为外部依赖，不打包进最终文件，因为它们在 Node.js 环境中会通过 node_modules 加载。
- --format=esm: 输出 ES 模块格式，与 package.json 中的 "type": "module" 配合。
dev: 类似于 build，但添加 --watch 选项，会在文件变化时自动重新构建。

7. 运行和构建您的应用

现在您可以尝试运行和构建您的 React Ink 应用了。

开发模式运行：

npm start
# 或者带参数运行
npm start Gemini

您应该会在命令行中看到 Hello, World! 或 Hello, Gemini!。

构建生产版本：

npm run build

这会在 dist 目录下生成 cli.js 文件。

运行生产版本：

node dist/cli.js
# 或者带参数运行
node dist/cli.js Gemini

您应该会看到与开发模式相同的输出。

通过这些步骤，您就成功搭建了一个基于 React Ink 的 CLI 应用开发环境。您可以开始在 src/App.tsx 中编写更复杂的 Ink 组件来构建您的命令行应用了。