Fullstack Turborepo Starter 项目教程
1. 项目的目录结构及介绍
fullstack-turborepo-starter/
├── apps/
│ ├── api/
│ └── web/
├── packages/
│ ├── config/
│ ├── eslint-config-custom/
│ ├── tsconfig/
│ └── ui/
├── turbo.json
└── README.md
-
apps/: 包含项目的两个主要应用,
api
和web
。api/
: 后端服务目录,包含 API 相关的代码。web/
: 前端服务目录,包含 Web 应用相关的代码。
-
packages/: 包含共享的配置和组件。
config/
: 共享的配置文件。eslint-config-custom/
: 自定义的 ESLint 配置。tsconfig/
: 共享的 TypeScript 配置。ui/
: 共享的 UI 组件。
-
turbo.json: Turborepo 的配置文件,用于管理构建和部署流程。
-
README.md: 项目说明文档。
2. 项目的启动文件介绍
在 apps/api
和 apps/web
目录中,分别有启动文件用于启动后端和前端服务。
- apps/api/src/index.ts: 后端服务的入口文件,负责启动 API 服务器。
- apps/web/src/index.tsx: 前端服务的入口文件,负责启动 React 应用。
3. 项目的配置文件介绍
- turbo.json: 这是 Turborepo 的核心配置文件,定义了项目的构建和部署流程。
{
"pipeline": {
"build": {
"dependsOn": ["^build"]
},
"test": {
"dependsOn": ["build"]
},
"lint": {},
"deploy": {
"dependsOn": ["build", "test", "lint"]
}
}
}
- packages/tsconfig/base.json: 共享的 TypeScript 配置文件,定义了 TypeScript 编译选项。
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "es2015"],
"module": "commonjs",
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["**/*.ts", "**/*.tsx"]
}
- packages/eslint-config-custom/index.js: 自定义的 ESLint 配置文件,定义了代码风格和检查规则。
module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint', 'react', 'react-hooks'],
rules: {
// 自定义规则
}
};
通过以上配置文件,项目可以实现统一的代码风格和构建流程,提高开发效率和代码质量。