为monorepo扩展“paths”tsconfig文件

Question

我有这样的文件夹结构：

- mono-repo
  tsconfig.paths.json
  - Website
   tsconfig.json
   - src
     test.ts
     index.ts
  - Tool
   - src
    index.ts

// mono-repo/tsconfig.paths.json
{
  "compilerOptions": {
    "paths": {
      "tool": ["Tool/src"],
    }
  }
}

// mono-repo/Website/src/index.ts
import { test } from "test";
import { tool } from "tool";

test(tool);

我希望能够扩展tsconfig.paths.json，以便每个程序包都有正确类型的模块引入其他程序包。

---

尝试失败1

// mono-repo/Website/tsconfig.json
{
  "extends": "../tsconfig.paths.json",
  "compilerOptions": {
    "baseUrl": "./src",
  }
}

< p >< em >问题：无法找到模块"tool"。添加到路径的baseUrl导致mono-repo/Website/src/Tool/src。这不是真实路径。

---

尝试失败2

// mono-repo/Website/tsconfig.json
{
  "extends": "../tsconfig.paths.json",
  "compilerOptions": {
    "baseUrl": "../",
  }
}

< p >< em >问题：无法从“test”中导入测试。baseUrl 不是项目 src。任何与相对路径无关的东西都不会被导出。

---

功能性但丑陋的尝试3

// mono-repo/tsconfig.paths.json
{
  "compilerOptions": {
    "paths": {
      "tool": ["../../Tool/src"],
    }
  }
}

// mono-repo/Website/tsconfig.json
{
  "extends": "../tsconfig.paths.json",
  "compilerOptions": {
    "baseUrl": "./src",
  }
}

问题：已经可以工作，但是假设所有扩展了tsconfig.paths.json的tsconfig的baseUrl始终位于mono-repo下方两个目录。这在我的项目中目前是正确的，但我不想将其变成标准。

---

如何为monorepo设置可扩展的“路径”tsconfig json？

- Seph Reed

---

你应该使用项目引用。请参见此答案的下半部分，位于“这对于单体库非常有用”下面。 - Inigo

Answer 1

需要注意的是，tsconfig extends 是一种覆盖而不是合并。

有了这个信息，您就可以理解，通过扩展基础 tsconfig 所尝试实现的目标无法按照预期工作。

此外，为了解决解析问题，始终应该将 paths 选项与 baseUrl 配对使用。

尽管如此，以下是一个解决该问题的解决方案。

在项目根目录下创建一个名为 tsconfig.json 的文件，内容如下：

"paths": {
  "~/*": ["../../../mono-repo/*/src"]
}

这意味着在每个子包中，您可以扩展那个 tsconfig 文件，然后将您的 src 目录指定为一个 baseUrl。然后您就可以像下面这样导入：

import { tool } from "~/Tool";

希望清楚，如果有遗漏，请告诉我 =)

- Adrien De Peretti

---

对我来说不起作用。 TypeScript 仍然会引发“找不到模块或其对应的类型声明”的问题。 - Toan Tran

Answer 2

如果我理解正确，这是关于create-react-app的。如果是这样，那么您需要像src这样的多个文件夹放在存储库根目录中。这需要配置webpack，所以为了避免eject，请使用rewire并使用alias来处理多个顶级目录：

// config-overrides.js:

const {alias, configPaths} = require('react-app-rewire-alias')

module.exports = function override(config) {
  alias(configPaths())(config)
  return config
}

- oklas