如何设置具有多个源目录和单独编译目标的 Typescript 项目？

Question

我的包裹是这样的：

┌ tsconfig.json
├ src/
│ ├ index.ts         (import './dependence.ts')
│ └ dependence.ts
└ example/
  ├ index.html
  └ script.ts        (import '../src/index.ts')

我愿意

./src/*.ts 将在 ./dist/*.js
./example/*.ts 将在 ./example/*.js

在运行 tsc 之后，我希望我的包裹看起来像这样：

┌ tsconfig.json
├ src/
│ ├ index.ts         (import './dependence.ts')
│ └ dependence.ts
├!dist/
│ ├!index.js         (import './dependence.js')
│ └!dependence.js
└ example/
  ├ index.html
  ├ script.ts        (import '../src/index.ts')
  └!script.js        (import '../dist/index.js')

我对所有 tsconfig 选项有点困惑。
我尝试了很多选项，例如 baseUrl、paths、rootDir、outDir、rootDirs、...但都没有成功。

Answer 1

简单。使用单独的 tsconfig 文件，在每个源目录中一个，将每个文件建立为单独的项目并使用 Typescript project references 建立 example 之间的依赖关系项目和 src 项目。

src/tsconfig.json:

{
    "compilerOptions": {
       "rootDir": ".",
       "outDir": "../dist/",
       "composite": true  // required if another project has a reference to this one.
    },
}

example/tsconfig.json:

{
    "compilerOptions": {
      "rootDir": ".",
      "outDir": ".",  // because you want example to compile in place
    },
    "references": [   // declare the dependencies
      { "path": "../src" }  
    ]
}

使用 tsc -b 而不是 tsc -p 进行增量（即更快）构建：
Running tsc --build (tsc -b for short) will do the following:
- Find all referenced projects
- Detect if they are up-to-date
- Build out-of-date projects in the correct order
例如
- tsc -b src 只构建 src
- tsc -b example 由于依赖关系
- tsc -b src example 如果你想直白
如果您想在项目之间共享部分或大部分设置以实现 DRY 或强制一致性，您可以：
- 将另一个 tsconfig 放入根目录并将所有常用设置移至其中。
- 将每个子配置更改为 extend 根配置：
```
"extends": "../tsconfig.json"
```
  如果子配置在树中更深，则调整路径。
您可以进一步执行第 4 步并将其用作“a 'solution' tsconfig.json”，如项目参考文档 this section 中所述。这应该使您能够使用 tsc -b .
从整个项目根构建所有内容

我想我已经涵盖了您需要的一切。有 a detailed explanation of outDir and project references in this answer。如果我遗漏了什么或者您有任何问题，请告诉我。

如何设置具有多个源目录和单独编译目标的 Typescript 项目？

how to setup a Typescript project with multiple source dirs and separate compile destinations?

typescript

tsconfig