如何排查tsc -b编译时尝试处理client子目录的原因

项目结构 #

project/
  client/
    src/
      client.ts
    tsconfig.client.json
  src/
    index.ts
  tsconfig.json

问题现象 #

在project目录下执行tsc -b，控制台报错：

error TS5083: Cannot read file 'project/client/tsconfig.json'.

明明client子目录的tsconfig已经重命名为tsconfig.client.json，而且顶层tsconfig.json里既没把client加入references，include和rootDir也只针对src目录配置。试过--dry构建和--traceResolution参数，都没找到原因。

补充配置文件 #

project/tsconfig.json #

{
  "extends": "../../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "target": "es6",
    "lib": ["es2019","dom"],
    "jsx": "react",
    "noUnusedLocals": false
  },
  "include": ["./src/**/*"],
  "references": [
    { "path": "shared/api" },
    { "path": "../../lib/logger" },
  ]
}

../../../tsconfig.base.json #

{
    "compilerOptions": {
      "target": "es2020",
      "module": "commonjs",
      "moduleResolution": "node",
      "rootDir": "packages",
      "baseUrl": "./packages",
      "lib": ["es2019"],

      "strict": true,
      "noUnusedLocals": true,
      "noFallthroughCasesInSwitch": true,
      "noImplicitReturns": true,
      "esModuleInterop": true,
      "allowJs": true,

      "composite": true,
      "inlineSources": true,
      "sourceMap": true,
      "incremental": true,

      "skipLibCheck": true,
      "emitDeclarationOnly": true,

      "allowSyntheticDefaultImports": true,
      "experimentalDecorators": true,

      "newLine": "lf",

      "noEmitOnError": true,
    },
    "exclude": ["**/jest.config.js", "**/dist", "**/__mocks__/**/*", "**/coverage", "**/gulpfile.js"]
}

client/tsconfig.client.json #

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost",
      "webworker"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "references": [
    { "path": "../shared/api" },
    { "path": "../" }
  ]
}

问题根源 #

client目录下的tsconfig.client.json，它的references里包含了{"path": "../"}——也就是引用了上级的project目录。TypeScript的--build模式会自动追踪反向依赖：当你编译project时，TS会检查哪些项目引用了它，然后尝试把这些依赖也纳入构建流程。但client的配置文件名不是默认的tsconfig.json，所以TS找不到它，就抛出了这个错误。

解决办法 #

有几个可行的方案，选适合你的就行：

1. 重命名client的配置文件：把client/tsconfig.client.json改名为tsconfig.json，让TS能识别到这个子项目的配置。
2. 排除client目录：在project的tsconfig.json里添加"exclude": ["client/**/*"]，阻止TS扫描client目录里的内容。
3. 调整引用关系：修改client/tsconfig.client.json的references，删掉对../的引用，或者换成更明确的路径；如果不需要双向依赖，直接去掉这个引用即可。

内容的提问来源于stack exchange，提问作者djm181