如何使 TypeScript 输出有效的 ES6 模块导入语句？

所有主流浏览器 http://caniuse.com/#feat=es6-module支持 ES6 模块已有一段时间了。

这些方法与许多服务器端方法的不同之处在于，它们需要指定要从中导入的确切文件 - 它们无法使用文件发现。

这是有道理的 - 在 Node 应用程序或像 WebPack 这样的捆绑器中，它们实际上只需要模块的名称，然后可以花费一些额外的时间来发现保存代码的特定文件。在网络上，可能会浪费大量的往返（是'library' in library/index.js, or library/library.js, or library.js? require()不在乎，但在网络上我们必须这样做）。

TypeScript 有 ES6 模块支持（设置"module": "es6" in tsconfig.json）但它似乎正在使用文件发现方法......

假设我有library.ts:

export function myFunction(...) {  ... }

Then in app.ts:

import {myFunction} from './library';
var x = myFunction(...);

然而，这在转译时没有改变 - TS 输出仍然具有'library'文件发现的名称，这不起作用。这会引发错误，因为'library'未找到：

<script type="module" src="app.js"></script>

为了使 ES6 模块正常工作，TS 输出需要引用特定文件：

import {myFunction} from './library.js';
var x = myFunction(...);

如何使 TS 输出有效 ES6 模块import声明？

注：我是not询问如何使捆绑器将 TS 输出加入到单个文件中。我特别想使用单独加载这些文件<script type="module">

这是一个TypeScript 中的错误 https://github.com/Microsoft/TypeScript/issues/13422，尽管对于是否应该修复存在一些争议。

有一个解决方法：虽然 TS 不允许您指定.ts文件作为模块的源，它会让你指定一个.js扩展名（然后忽略它）。

So in app.ts:

import {myFunction} from './library.js';
var x = myFunction(...);

然后正确输出app.js，并且 TS 发现了import定义和绑定正确。

这有一个优点/陷阱需要注意/小心：TS 只是忽略.js扩展名并使用通常的文件发现加载路径的其余部分。这意味着它将导入library.ts，但它也会找到定义文件，例如library.d.ts或导入文件library/ folder.

如果您要将这些文件连接到一个文件中，那么最后一种情况可能是理想的library.js输出，但要做到这一点，您将查看大量嵌套tsconfig.json文件（混乱）或可能是另一个库的预转译输出。