为 monorepo 扩展“路径”tsconfig 文件

Question

I've got a folder structure like so:

- 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);

I'd like to be able to extend tsconfig.paths.json so that every package has correctly typed module imports for the others.

---

Failed Attempt 1

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

Issue: can not find module "tool". The baseUrl added to the path leads to mono-repo/Website/src/Tool/src . This is not a real path.

---

Failed Attempt 2

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

Issue: can not import test from "test". The baseUrl is not the project src. Anything but relative paths will be unexportable.

---

Functional but Ugly Attempt 3

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

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

Issue: works, but makes the assumption that the baseUrl of every tsconfig which extends tsconfig.paths.json will always be two directories below mono-repo . This is currently true for my project, but I'm hesitant to make this a standard.

---

How does one set up an extendable "paths" tsconfig json for a monorepo?

Answer 1

Something to know is that tsconfig extends is an override and not a merge . With that information, you can understand that what you are trying to achieve by extending the base tsconfig can't work as you expecting it to do.

Also, using the paths options should always work as a pair with the baseUrl in order to solve the resolution problem.

N.netheless, here is a solution that you can use to solve that problem.

create a tsconfig.json at the root level of your project alongs the line of:

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

Which means in each sub packages, you can extends that tsconfig file and then specify your src directory as a baseUrl . Then you will be able to import as follow:

import { tool } from "~/Tool";

Hope that it is clear, let me know if something is missing =)

Answer 2

If I understand correctly it is about create-react-app . If so then you need multiple folder like src in the repo root directory. This require configure webpack so to avoid eject use rewire and use alias for multiple top level directory:

// config-overrides.js:

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

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