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

Question

All major browsers已经支持 ES6 模块有一段时间了。

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

这是有道理的——在 Node 应用程序或像 WebPack 这样的 bundler 中，他们只真正需要模块的名称，然后可以花费一些额外的时间来发现包含代码的特定文件。在网络上可能会浪费很多往返('library' 在 library/index.js 或 library/library.js 或 library.js ？ require() 不关心，但在网络上我们必须关心)。

TypeScript 支持 ES6 模块(在 "module": "es6" 中设置 tsconfig.json)，但它似乎使用了文件发现方法...

假设我有 library.ts :

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

然后在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声明？

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

Answer 1

这是一个 bug in TypeScript ，尽管对于是否应该修复它存在一些争论。

有一个解决方法:虽然 TS 不允许您将 .ts 文件指定为模块的源，但它会让您指定 .js扩展名(然后忽略它)。

所以在 app.ts 中:

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

然后在 app.js 中正确输出，并且 TS 已正确找到 import 定义和绑定(bind)。

这有一个优点/需要注意/注意:TS 只是忽略 .js 扩展名，并使用通常的文件发现加载路径的其余部分。这意味着它会导入 library.ts，但它也会找到像 library.d.ts 这样的定义文件或在 library/ 中导入文件> 文件夹。

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