关于 TypeScript 手册：使用 rootDirs 的虚拟目录

在手册中，关于带有 rootDirs 的虚拟目录部分，第一个示例显示你可以通过将不同的 rootDirs 合并为一个，从不同的源文件夹导入模块。

// File Structure
 src
 └── views
     └── view1.ts (imports './template1')
     └── view2.ts

 generated
 └── templates
         └── views
             └── template1.ts (imports './view2')


// Setting
{
  "compilerOptions": {
    "rootDirs": [
      "src/views",
      "generated/templates/views"
    ]
  }
}

请注意，在导入模块时可以省略 rootDir 中列出的路径。

我不明白的是第二个例子。

{
  "compilerOptions": {
    "rootDirs": [
      "src/zh",
      "src/de",
      "src/#{locale}"
    ]
  }
}

“编译器现在将把来自 './#{locale}/messages' 的导入消息解析为来自 './zh/messages' 的导入消息，以用于工具目的。”

为什么？
在构建过程中，#{locale} 会被替换为 zh 吗？
为什么我们在 ./#{locale}/messages 中使用相对路径？如果导入的文件位于 src/folderA/ 呢？
鉴于 src/zh 被合并为 rootDir，是不是应该使用 /messages 来导入？

这个例子没有展示文件结构，所以我很困惑。期待回复。谢谢！

更新 2017/12/21

我正在尝试推断文件夹结构：

 src
 └── zh 
      └── messages
 └── de
      └── messages
 └── app.ts (import messages from './#{locale}/messages')

根据第一个示例，所有这些 rootDirs 都将被复制到一个虚拟的 dist 目录中，以便它们可以相互引用：

dist
 └── messages (zh, de got conflict here!)
 └── app.ts

应该有冲突！不是吗？

答案＃1

希望这能有所解释。

许多构建或部署工具允许你输入一个令牌，然后该令牌将由工具在稍后进行替换。例如，如果我的模块中有这一行代码：

import messages from './#{locale}/messages';

构建工具会将 #{locale} 令牌替换为与构建相关的值，例如，如果我正在构建应用的德语版本，它将被替换为 de。

这里的问题是你的编辑器不知道构建/部署工具会这样做，所以通过在你的 rootDirs 中同时指定带有标记的路径和真实路径，编译器和你的编辑器在遇到带有标记的路径时可以使用“已知”的路径。

问答

为什么？

因为很多人使用代币进行构建或发布。

在构建过程中，#{locale} 会被替换为 zh 吗？

不是由 TypeScript 编译器完成的——而是由“其他工具”。例如，Octopus Deploy 就有这个功能。

为什么我们在 ./#{locale}/messages 中使用相对路径？

因为这是一个如何使用分词 URL 的示例。它恰好利用了 rootDirs 功能。

如果导入的文件位于 src/folderA/ 会怎样？

import messages from '../#{locale}/messages';

鉴于 src/zh 被合并为 rootDir，导入时不应该是 /messages 吗？

你 仍然可以 将这些文件夹用作根目录……即

import messages from 'de/messages';

但这个例子实际上是关于你如何对路径进行分词的：

import messages from './#{locale}/messages';