简述 tsconfig.json 中 rootDir 和 include 之间的关系

tsconfig.json 中的 rootDir 和 include 之间有一定的关系，但它们的作用是不同的。理解它们的关系可以帮助你更好地配置 TypeScript 项目。

---

1. rootDir 的作用

rootDir 用于指定 TypeScript 编译器（tsc）的“根目录”。它的主要作用是：

• 确定输入文件的基准路径。
• 控制输出文件的目录结构。

当 rootDir 被设置时：

• TypeScript 会假设所有输入文件都位于 rootDir 或其子目录中。
• 输出的文件结构会基于 rootDir 的相对路径生成。

例如：

{
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  }
}

• 如果有一个文件 src/utils/helper.ts，编译后会生成 dist/utils/helper.js。
• 如果某个文件不在 rootDir 或其子目录中，tsc 会报错。

---

2. include 的作用

include 用于指定哪些文件或目录应该被 TypeScript 编译器处理。它的主要作用是：

• 明确告诉 TypeScript 哪些文件需要被编译。
• 支持 glob 模式（如 **/* 或 *.ts）。

例如：

{
  "include": ["src/**/*"]
}

• 这表示 src 目录及其子目录下的所有文件都会被编译。

---

3. rootDir 和 include 的关系

• rootDir 是输入文件的基准路径，它决定了输出文件的目录结构。
• include 是文件匹配规则，它决定了哪些文件会被编译器处理。

它们的关系可以总结为：

1. include 的文件必须在 rootDir 或其子目录中：

   • 如果 include 中的文件不在 rootDir 或其子目录中，tsc 会报错。
   • 例如：

     {
       "compilerOptions": {
         "rootDir": "src"
       },
       "include": ["src/**/*", "tests/**/*"]
     }
     

     如果 tests 目录不在 src 目录下，tsc 会报错，因为 tests 超出了 rootDir 的范围。

2. rootDir 的默认值：

   • 如果没有显式设置 rootDir，TypeScript 会根据 include 和 files 的路径自动推断 rootDir。
   • 推断规则是：取 include 和 files 中所有文件的最长公共路径作为 rootDir。

3. rootDir 影响输出目录结构：

   • 输出的文件结构会基于 rootDir 的相对路径生成。
   • 例如：

     {
       "compilerOptions": {
         "rootDir": "src",
         "outDir": "dist"
       },
       "include": ["src/**/*"]
     }
     

     • 文件 src/utils/helper.ts 会输出到 dist/utils/helper.js。
     • 文件 src/index.ts 会输出到 dist/index.js。

---

4. 常见问题

问题 1：include 的文件超出了 rootDir 的范围

如果 include 中的文件不在 rootDir 或其子目录中，tsc 会报错：

error TS6059: File is not under 'rootDir'. 'rootDir' is expected to contain all source files.

解决方法：

• 确保 include 的文件都在 rootDir 或其子目录中。
• 或者不设置 rootDir，让 TypeScript 自动推断。

问题 2：rootDir 设置错误导致输出目录结构混乱

如果 rootDir 设置不正确，输出的目录结构可能不符合预期。

解决方法：

• 确保 rootDir 是输入文件的正确基准路径。
• 如果不确定，可以不设置 rootDir，让 TypeScript 自动推断。

---

5. 示例

示例 1：显式设置 rootDir 和 include

{
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src/**/*"]
}

• 编译 src/utils/helper.ts 会输出到 dist/utils/helper.js。
• 如果 include 包含 tests/**/*，会报错，因为 tests 不在 src 目录下。

示例 2：不设置 rootDir，自动推断

{
  "compilerOptions": {
    "outDir": "dist"
  },
  "include": ["src/**/*", "tests/**/*"]
}

• TypeScript 会自动推断 rootDir 为 src 和 tests 的最长公共路径（可能是项目根目录）。
• 编译 src/utils/helper.ts 会输出到 dist/src/utils/helper.js。
• 编译 tests/test.ts 会输出到 dist/tests/test.js。

---

总结

• rootDir 是输入文件的基准路径，影响输出目录结构。
• include 是文件匹配规则，决定哪些文件会被编译。
• include 的文件必须在 rootDir 或其子目录中，否则会报错。
• 如果不设置 rootDir，TypeScript 会根据 include 和 files 自动推断 rootDir。

根据你的需求合理配置 rootDir 和 include，可以避免路径问题并确保编译结果符合预期。