带有rootDirs的Monorepo会在outDir中生成不需要的子目录，例如src。 [英] Monorepo with `rootDirs` produces unwanted sudirectories such as `src` in `outDir`

问题描述

我正在计划一个monorepo打字稿项目，如下所示：

I am planning a monorepo typescript porject like below:

/ (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 ，如下所示：

When I execute tsc under backend it gives me like below:

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

在上面， dist 包含后端和共享的但它们每个都包含 src 。我想在 dist 下的后端和 shared 包含已编译的JS文件没有 src ：

In the above, dist contains backend and shared BUT each of them contains src under it. I wanted backend and shared under dist contain compiled JS files without src:

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

有可能吗？我该怎么做？

Is it possible ? And how can I make it ?

推荐答案

诊断

• Typescript依靠 rootDir （而不是 rootDirs ）来决定输出的目录结构（请参见< a href = https://github.com/microsoft/TypeScript/issues/9858#issuecomment-370537216 rel = nofollow noreferrer>来自Typescript老板的评论）。


• 当您设置多个 rootDirs 时， tsc 将找到所有父目录都公用的父目录并对其进行处理 that 是 rootDir 。 这就是为什么要获得要获得的 outDir 结构的原因。



diagnosis

• Typescript relies on rootDir (not rootDirs) to decide the directory structure of the output (see this comment from Typescript's bossman).
• When you set multiple rootDirs, tsc will find the parent directory that is common to all of them and treat that a the rootDir. This is why you're getting the outDir structure that you're getting.




由 tsconfig 文件定义的 Typescript项目，该文件是自包含的，并且有效受其 rootDir 限制。这是一件非常好的事情，因为它符合封装原理。

A Typescript project is defined by a tsconfig file, is self-contained, and is effectively bounded by its rootDir. This is a very good thing, as it lines up with principles of encapsulation.

您可以有多个项目（例如，一个主项目和一个一组lib），每个文件都在自己的目录中，并带有自己的tsconfig和自己的 rootDir 。使用Typescript 在tsconfig文件中管理它们之间的依赖性项目参考。

You can have multiple a projects (e.g. a main and a set of libs) each in their own directory with their own tsconfig, with their own rootDir. Dependencies between them are managed in the tsconfig files using Typescript Project References.




不幸的是，打字稿人选择了项目一词，直觉上是指整个shebang，但模块和包装。但是，如果您将它们视为 subprojects ，它将更加有意义。

但是我建议您可以像这样构造您的存储库：

But I recommend you structure your repo like so:

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

这样，在编译代码时您会得到：

So that when you compile your code you get:

.
├── dist
│   ├── shared
│   ├── backend
│   └── frontend
└── src

示例tsconfigs




• src / tsconfig.json

• src/tsconfig.json

即使您有根本没有代码，此tsconfig可以放在
所有常用设置都可以进入的位置（其他设置将从那里继承），而
则可以启用简单的 tsc --build src 来构建整个
项目（并使用-force 来从头开始构建它）。

Even if you have no code at the root, this tsconfig can be where all the common settings go (the others will inherit from it), and it will enable a simple tsc --build src to build the whole project (and with --force to build it from scratch).

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








• src / shared / tsconfig.json

  • src/shared/tsconfig.json

    共享不会导入任何其他项目因为它没有参考。它导入的所有内容都限于其目录中，并且
    依赖项列在 package.json 中。我相信，您甚至可以通过给它
    自己的 package.json 来限制后者。

    shared won't import any of the other projects as it has no references. All it imports are limited to within its directory and dependencies listed in package.json. You could even restrict the the latter, I believe, by giving it its own package.json.

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

  
  

  • src / backend / tsconfig.json

  • src/backend/tsconfig.json

    后端可以由于声明的引用而导入共享。

    backend can import shared because of the declared reference.

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

  
  

  • src / frontend / tsconfig.json

  • src/frontend/tsconfig.json

    前端可以由于声明的引用而导入共享和前端。

    frontend can import shared AND frontend because of the declared references.

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

  
  

  示例构建命令

  tsc --build src 将构建整个src树

  tsc --build src / backend 将构建后端并共享（如果自上次构建以来已发生更改。

  tsc --build src/backend will build the the backend AND shared (if there have been changes since the last build.

  这篇关于带有rootDirs的Monorepo会在outDir中生成不需要的子目录，例如src。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！