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 组件来构建您的命令行应用了。