具有`rootDirs`的Monorepo在`outDir`中产生不需要的子目录，如`src`

Question

我正在计划如下的monorepo打字稿项目：

/ (root)
+--backend/
|  +-src/
|  \-tsconfig.json
+--shared/
|  \-src/
\--frontend/
   \-src/

tsconfig.json的定义如下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "baseUrl": "./src",
    "paths": {
      "shared": [
        "../../shared/src"
      ]
    },
    "rootDirs": [
      "./src",
      "../shared/src"
    ],
    "esModuleInterop": true
  }
}

当我在tsc下执行backend时，如下图所示：

/ (root)
+-backend/
  +-dist/
  | +-backend/
  | | +-src/
  | \-shared/
  |   \-src/
  +-src/
  \-tsconfig.json

在上面，dist包含backend和shared，但它们下面分别包含src。我想要backend下的shared和dist包含没有src的已编译JS文件：

/ (root)
+-backend/
  +-dist/
  | +-backend/
  | \-shared/
  +-src/
  \-tsconfig.json

有可能吗？我该怎么做？

Answer 1

诊断

• Typescript依靠rootDir（而不是rootDirs）来决定输出的目录结构（请参阅this comment from Typescript's bossman）。
• 当您设置多个rootDirs时，tsc将找到所有它们都公用的父目录，并将that视为rootDir。 这就是为什么要得到outDir结构的原因。

处方：将您的monorepo构造为单独的Typescript子项目

A Typescript项目由tsconfig文件定义，是自包含的，并且受[rootDir]限制。这很不错，因为它与封装原理对齐。您可以在自己的目录中有多个项目（例如一个主库和一组lib），每个项目都有自己的tsconfig和自己的rootDir。使用Typescript Project References在tsconfig文件中

管理它们之间的依赖关系

。

[不幸的是，打字稿人选择了“项目”一词，直觉上是指整个shebang，但是已经使用了“模块”和“包”。但是，如果您将它们视为

subprojects

，这将更加有意义。但是我建议您像这样构造存储库：

.
├── dist
└── src
    ├── tsconfig.json
    ├── shared
    │   ├── index.ts
    │   └── tsconfig.json
    ├── backend
    │   ├── index.ts
    │   └── tsconfig.json
    └── frontend
        ├── index.ts
        └── tsconfig.json 

这样，当您编译代码时，您会得到：
.
├── dist
│   ├── shared
│   ├── backend
│   └── frontend
└── src

tsconfigs示例

• [src/tsconfig.json

即使您根本没有代码，也可以在tsconfig所有常用的设置都可以使用（其他设置可以继承），并且它将使简单的tsc --build src可以构建整个项目（并使用--force从头开始构建它）。

{
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "../dist/",
  },
  "files": [],
  "references": [
    { "path": "./shared" },
    { "path": "./backend" },
    { "path": "./frontend" }
  ]
}

• [src/shared/tsconfig.json

  shared

  将不会导入任何其他项目，因为它没有引用。它导入的所有内容都限于其目录内，并且package.json中列出的依赖项。您甚至可以限制我相信，通过赋予它自己的package.json。

  {
    "compilerOptions": {
      "rootDir": ".",
      "outDir": "../../dist/shared",
      "composite": true
    }
  }

• [src/backend/tsconfig.json

后端

可以导入shared，因为已声明引用。

{
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "../../dist/backend",
    "composite": true
  },
  "references": [
    { "path": "../shared" }
  ]
}

[src/frontend/tsconfig.json

由于声明的引用，

frontend

可以导入shared和frontend。

{
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "../../dist/frontend",
    "composite": true
  },
  "references": [
    { "path": "../shared" },
    { "path": "../backend" }
  ]
}

示例构建命令[tsc --build src将构建整个src树
[tsc --build src/backend将构建后端并进行共享（如果自上次构建以来发生了更改。