为 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",
  }
}

问题： 找不到模块 "tool"。添加到路径中的 baseUrl 指向 mono-repo/Website/src/Tool/src。这不是真正的路径。

第 2 次尝试失败

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

问题： 无法从 "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 设置可扩展的 "paths" tsconfig json？

Answer 1

如果我没理解错的话，大概是create-react-app。如果是这样，那么您需要在 repo 根目录中设置多个文件夹，例如 src。这需要配置 webpack 以避免弹出使用重新布线并对多个顶级目录使用 alias：

// config-overrides.js:

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

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

Answer 2

需要知道的是 tsconfig extends 是 override 和 not a merge。有了这些信息，您就可以理解您试图通过扩展基本 tsconfig 来实现的目标无法像您期望的那样工作。

此外，使用 paths 选项应始终与 baseUrl 配对使用，以解决分辨率问题。

不过，这里有一个解决方案可以用来解决这个问题。

在您的项目的根级别沿着以下行创建一个 tsconfig.json：

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

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

import { tool } from "~/Tool";

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

为 monorepo 扩展 "paths" tsconfig 文件

Extend a "paths" tsconfig file for a monorepo

typescript

tsconfig

monorepo