tRPC 项目教程
1. 项目的目录结构及介绍
tRPC 项目的目录结构如下:
trpc/
├── examples/
├── packages/
│ ├── adapter-fastify/
│ ├── adapter-express/
│ ├── client/
│ ├── server/
│ ├── core/
│ ├── react/
│ ├── next/
│ └── ...
├── scripts/
├── tests/
├── .gitignore
├── .npmignore
├── .prettierrc
├── .eslintrc
├── tsconfig.json
├── turbo.json
├── vitest.config.ts
├── README.md
├── LICENSE
└── package.json
目录介绍
examples/
: 包含多个示例项目,展示了 tRPC 的不同使用场景。packages/
: 包含 tRPC 的核心包和适配器,如adapter-fastify
,adapter-express
,client
,server
等。scripts/
: 包含项目构建和部署的脚本。tests/
: 包含项目的测试文件。.gitignore
: 指定 Git 版本控制系统忽略的文件和目录。.npmignore
: 指定 npm 发布时忽略的文件和目录。.prettierrc
: 配置代码格式化工具 Prettier。.eslintrc
: 配置代码检查工具 ESLint。tsconfig.json
: 配置 TypeScript 编译选项。turbo.json
: 配置 Turborepo 构建工具。vitest.config.ts
: 配置 Vitest 测试框架。README.md
: 项目介绍和使用说明。LICENSE
: 项目许可证。package.json
: 项目依赖和脚本配置。
2. 项目的启动文件介绍
tRPC 项目的启动文件通常位于 packages/
目录下的各个子包中。以下是一些关键的启动文件:
packages/server/src/index.ts
这是 tRPC 服务器端的主要入口文件,负责初始化服务器并启动监听。
import { createServer } from 'http';
import { createExpressMiddleware } from '@trpc/server/adapters/express';
import { appRouter } from './router';
const server = createServer(async (req, res) => {
// Initialize tRPC middleware
await createExpressMiddleware({
router: appRouter,
createContext: () => ({}),
})(req, res);
});
server.listen(3000, () => {
console.log('Server listening on port 3000');
});
packages/client/src/index.ts
这是 tRPC 客户端的主要入口文件,负责创建客户端实例并与服务器进行通信。
import { createTRPCClient } from '@trpc/client';
import { httpLink } from '@trpc/client/links/httpLink';
import { appRouter } from './router';
const client = createTRPCClient({
links: [
httpLink({
url: 'http://localhost:3000/trpc',
}),
],
});
async function main() {
const result = await client.query('hello');
console.log(result);
}
main();
3. 项目的配置文件介绍
tRPC 项目的配置文件主要包括以下几个:
tsconfig.json
TypeScript 编译配置文件,定义了编译选项和路径映射。
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src"]
}
turbo.json
Turborepo 构建工具的配置文件,定义了构建任务和依赖关系。
{
"pipeline": {
"build": {
"dependsOn": ["^build"]
},
"test": {
"dependsOn": ["build"]
},
"lint":