迹忆客 专注技术分享

当我们尝试从不位于 tsconfig.json 中指定 rootDir 下的文件中导入某些内容时，会发生“File is not under 'rootDir'”错误。 要解决该错误，请将文件移动到项目的根目录下或从 tsconfig.json 中删除 rootDir 设置。

假设我们有一个具有以下文件夹结构的项目：

typescript
  └──src
    └── index.ts

  └──  another-file.ts

我的 tsconfig.json 文件中的 rootDir 选项指向 src 目录。

{
  "compilerOptions": {
    "rootDir": "src",
    // ... rest
  }
}

如果我尝试从我的 index.ts 文件中的 another-file.ts 导入，我会得到错误，因为 another-file.ts 不在我项目的 src 目录中。

// ⛔️ Error: File '/Users/jiyik/workspace/typescript/another-file.ts'
// is not under 'rootDir' '/Users/jiyik/workspace/typescript/src'.
// 'rootDir' is expected to contain all source files.ts(6059)
import { Sizes } from '../another-file';

console.log(Sizes);

我们正在尝试从位于 1 个目录上方（在我们指定的 rootDir 之外）的文件导入。

解决错误的一种方法是将文件移动到指定的 rootDir 下并导入它。

typescript
  └──src
    └── index.ts
    └── another-file.ts

现在我可以导入文件而不会出现任何错误。

import { Sizes } from './another-file';

// 👇️ { Small: 'S', Medium: 'M', Large: 'L' }
console.log(Sizes);

如果你必须坚持以前的文件结构：

typescript
  └──src
    └── index.ts

  └──another-file.ts

我们可以尝试从 tsconfig.json 中删除 rootDir 选项。

rootDir 设置默认为所有非声明输入文件的最大公共路径。

当 TypeScript 编译文件时，它在输出目录中保持与输入目录中相同的目录结构。

从 tsconfig.json 文件中删除 rootDir 选项。

{
  "compilerOptions": {
    // "rootDir": "src", // 👈️ remove this
    // ... rest
  }
}

现在，TypeScript 编译器将根据我们的导入自动确定项目的 rootDir 设置。

// ✅ Works fine now
import { Sizes } from '../another-file';

// 👇️ { Small: 'S', Medium: 'M', Large: 'L' }
console.log(Sizes);

如果我重新运行我的构建命令，我现在可以看到我的构建文件夹具有以下结构。

typescript
  └── build
    └── src
      └── index.js
    └── another-file.js

请注意 ，TypeScript 在编译文件后在构建目录中保留了相同的目录结构。

总结

当我们尝试从不位于 tsconfig.json 中指定 rootDir 下的文件中导入某些内容时，会发生“File is not under 'rootDir'”错误。 要解决该错误，请将文件移动到项目的根目录下或从 tsconfig.json 中删除 rootDir 设置。