更新12/21/2017

Question

在handbook，带有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}"
    ]
  }
}

＆＃34;编译器现在将解析来自'./#{locale}/messages'的导入消息，以便从'./zh/messages'导入消息以用于工具目的＆＃34;。

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

示例没有显示文件结构，所以我很困惑。期待回应。谢谢！

更新12/21/2017

我试图推断出文件夹结构：

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

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

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

应该有冲突！不是吗？

Answer 1

希望这有助于解释。

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

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

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

这里的问题是你的编辑器不知道构建/部署工具会这样做，因此通过在rootDirs中指定标记化路径以及实际路径，编译器和编辑器可以使用每当遇到标记化路径时都会出现“已知”路径。

Q＆amp;甲

为什么？

因为许多人使用令牌进行构建或发布。

＃{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';

关于打字稿手册：使用rootDirs的虚拟目录

更新12/21/2017

1 个答案:

Q＆amp;甲