使用 Typescript 3 构建到 dist/ 文件夹时保持 src/ 文件夹结构答案

【问题标题】：Maintain src/ folder structure when building to dist/ folder with Typescript 3使用 Typescript 3 构建到 dist/ 文件夹时保持 src/ 文件夹结构
【发布时间】：2019-02-06 20:33:25
【问题描述】：

我有一个具有这种结构的 typescript nodejs 服务器：

tsconfig.json
package.json
src/
    middleware/
    utils/
    index.ts
dist/
    middleware/
    utils/
    index.js

在使用 Typescript 2 时，我能够将我的项目从 src/ 转换到 dist/ 文件夹，并且可以使用我的目录结构的镜像。

随着 Typescript 3 的发布，他们引入了 project references 并改变了将代码转译到输出目录的方式。现在tsc 以这样的嵌套方式输出到 dist/ 文件夹：

dist/
    src/
        middleware/
        utils/
        index.js

我的 tsconfig.json 是：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "declaration": false,
    "outDir": "dist/",
    "lib": [
      "es7",
      "dom"
    ]
  },
  "include": [
    "src/"
  ]
}

如何配置 Typescript 以将我的 src/ 文件夹作为镜像输出到 dist/ 文件夹中？

【问题讨论】：

标签： typescript build tsc transpiler

【解决方案1】：

如果您尝试将位于/scr/mydir/hello.ts 的打字稿文件编译为/dist/mydir/hello.js，但该文件不断在/dist/hello.js 创建，您可以在/src/another.ts 添加另一个打字稿文件。这样，两个编译文件将转到/src/another.js 和/src/mydir/hello.js。记住，在你的tsconfig.json，outDir必须设置为./dist

【讨论】：

【解决方案2】：

除了指定compilerOptions.outDir之外，还要在tsconfig.json中指定compilerOptions.rootDir。

{
  "compilerOptions": {
     // ...
    "outDir": "dist",
    "rootDir": "./",
    // ...
  }
}

然后在tsconfig.json文件所在的文件夹中运行：$ tsc -b。

【讨论】：

【解决方案3】：

您可以在 ./src 中的文件中更改从 src/entities/Post -> ../entities/Post 的文件导入

这会更改 dist 文件夹中的导入。

【讨论】：

【解决方案4】：

输出目录的结构由compilerOptions 的rootDir 控制。 See documentation here，将其设置为 ./src 应该可以解决问题。

{
  "compilerOptions": {
    "rootDir": "src",
    ...
  },
  "include": [
    "src/"
  ]
}

【讨论】：

实际上在这种情况下它只会交换问题。 OP 正在导入package.json，因此如果您将rootDir 更改为src，您将获得正确的outDir 结构，但由于您有rootDir 之外的源代码，所以会出现编译错误。请参阅stackoverflow.com/a/61467483/8910547 了解更多信息以及 Typescript 老板所说的链接。
使用 rootDir 解决了我正在导入的本地 .ts 库的问题

【解决方案5】：

最初转换为 Typescript 项目时，我遇到了类似的问题。我还设置了resolveJsonModule: true，并将src 目录复制到了输出dist 目录中。

根本原因是我的一个源文件required package.json 位于项目的根目录。一旦我删除它，tsc 不再将 src 添加到 dist 目录。

简而言之，确保您不需要 src 目录之外的文件。

此处为解释性常见问题解答：https://github.com/Microsoft/TypeScript/wiki/FAQ#why-does---outdir-moves-output-after-adding-a-new-file

【讨论】：

有效！但为什么？为什么 resolveJsonModule 使 tsc 输出到 /dist/src 而不是 /dist ？这没有任何意义。
@s.meijer 因为它启用了导入package.json（一个“JsonModule”），并强制rootDir 自动设置为包含所有源的目录（即包括@987654333 @)，现在 src 目录不再是 rootDir 而是一个子目录，因此反映在输出中。请参阅stackoverflow.com/a/61467483/8910547 了解更多信息以及 Typescript 老板所说的链接。
感谢您。当您想要具有诸如 ./src/ 和 ./typings 之类的结构但不希望在 ./dist 中包含 ./src 时，它也会产生相同的输出……长话短说，只要您引用 ./在 ./src 中输入，它将被包含在内，因此 ./src 将被保留。 T_T
在我的例子中是"include": ["**/*.ts"] -> "include": ["src/**/*.ts"] 在tsconfig.json。

【解决方案6】：

将resolveJsonModule: true添加到tsconfig.json后出现问题

【讨论】：

【解决方案7】：

从 TypeScript 2 升级到 3 本身不应该改变行为；如果我们可以确认确实如此，那可能是一个错误。在任何情况下，检查rootDir 编译器选项是否指向您的src 目录而不是父目录，因为rootDir 下的结构是outDir 下的镜像。

【讨论】：

我添加了我的 tsconfig.json 来帮助澄清。项目配置围绕使用"include" 键来指定src/ 目录。我刚刚确认 Typescript 2 编译器将使用此配置简单地将 src/ 镜像到 dist/ 中，但 Typescript 3 编译器将自动包含 package.json 和嵌套在 dist/ 中的 src/ 文件夹。尝试将 rootDir 指向 src/ 失败，因为 package.json 文件不在其中。
根据您提供的信息，我无法重现此行为。如果您可以发布一个重现该问题的存储库，我会看看。否则，我只能建议你尝试从项目中删除一些东西，直到问题消失，然后你就会看到是什么原因造成的。
我能够确定原因。似乎将 resolveJsonModule: true 添加到我的 tsconfig.json 导致 tsc 以不同的方式输出 dist/ 目录。我仍然不完全清楚它为什么这样做，但它似乎是一些 Github 问题中的一个话题：github.com/Microsoft/TypeScript/issues/25216 和 github.com/Microsoft/TypeScript/issues/24744 谢谢你的帮助，马特！
compiler-options 页面上根本不清楚。