1. tsconfig.json - 主 TypeScript 配置

这是项目的主要 TypeScript 配置文件，通常用于前端代码的编译。

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

2. tsconfig.node.json - Node.js 环境配置

专门用于 Node.js 环境的 TypeScript 配置，主要处理构建工具相关的文件。

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "types": ["node"]
  },
  "include": ["vite.config.ts", "vitest.config.ts", "build/**/*"]
}

3. vite.config.ts - Vite 构建配置

Vite 的配置文件，定义了构建和开发服务器的行为。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

三者关系图

项目根目录
├── tsconfig.json          (前端代码 TS 配置)
├── tsconfig.node.json     (构建工具 TS 配置)
├── vite.config.ts         (Vite 构建配置)
└── src/
    └── ... (前端源码)

构建流程图

具体关系说明

1. 分工明确

• tsconfig.json: 处理 src/ 下的前端业务代码
• tsconfig.node.json: 处理 vite.config.ts 等构建相关文件
• vite.config.ts: 配置 Vite 的构建和开发行为

2. Vite 如何使用这些配置

// vite.config.ts 中可以引用 tsconfig
import { defineConfig } from 'vite'

export default defineConfig({
  // Vite 会自动读取 tsconfig.json 进行 TS 编译
  esbuild: {
    // 可以覆盖 tsconfig 的某些选项
    target: 'es2020'
  }
})

3. 实际工作流程

# 开发时
npm run dev
# Vite 读取 vite.config.ts
# vite.config.ts 使用 tsconfig.node.json 进行类型检查
# 前端代码使用 tsconfig.json 进行编译

# 构建时  
npm run build
# 同样的配置关系，但执行构建流程

4. 常见的项目结构配置

// package.json 中的引用
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

5. 为什么需要两个 tsconfig？

// tsconfig.json - 前端代码环境
// 需要 DOM 类型，React 相关配置
{
  "lib": ["ES2020", "DOM"],
  "jsx": "react-jsx"
}

// tsconfig.node.json - Node.js 环境  
// 需要 Node.js 类型，不需要 DOM
{
  "types": ["node"],
  // 没有 DOM 相关配置
}

简单来说：
tsconfig.json 是整个 TypeScript 项目通用的配置，像编译目标、模块类型这些基础设置。而 tsconfig.node.json 主要针对 Node.js 环境做优化，比如会更关注 Node.js 的模块系统、一些特定的全局变量声明等。可能在一些简单项目里区别不明显，但项目复杂了，像涉及到服务器端渲染、调用 Node.js 特定模块功能时，tsconfig.node.json 就能让配置更精准，让代码在 Node.js 环境里运行得更顺畅。

6. 实际执行流程图