如何使TypeScript输出有效的ES6模块导入语句？ [英] How to make TypeScript output valid ES6 module import statements?

问题描述

所有主流浏览器一段时间以来都支持ES6模块。

All major browsers have supported ES6 modules for some time.

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

These differ from many of the server-side approaches in that they need to specify the exact file to import from - they can't use file discovery.

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

This makes sense - in Node applications or bundlers like WebPack they only really need the name of the module, and then can spend a bit of extra time discovering the specific file that holds the code. On the web that could be a lot of wasted round trips (is 'library' in library/index.js, or library/library.js, or library.js? require() doesn't care but on the web we have to).

TypeScript支持ES6模块（设置为 module： es6 中的 tsconfig.json ），但它似乎正在使用文件发现方法...

TypeScript has ES6 modules support (set "module": "es6" in tsconfig.json) but it appears to be using a file discovery approach...

假设我有 library.ts ：

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

然后在 app中.ts ：

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

但是，在转储时，此值不变-TS输出仍然具有'库'的文件发现名称，该名称无效。抛出错误是因为找不到'library'：

However, this is unchanged when transpiles - the TS output still has the 'library' name for file discovery, which doesn't work. This throws an error because 'library' isn't found:

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

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

In order for ES6 modules to work the TS output needs to reference the specific file:

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

如何使TS输出有效地导入ES6模块 语句？

How do I make TS output valid ES6 module import statements?

注意：我不是问如何使捆绑器将TS输出加入到单个文件。我特别想使用< script type = module>

Note: I am not asking how to make a bundler join the TS output into a single file. I specifically want to load these files individually using <script type="module">

推荐答案

这是 TypeScript中的错误，尽管对此存在一些争论

This is a bug in TypeScript, though there's some debate about whether it should be fixed.

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

There is a workaround: while TS won't allow you to specify a .ts file as the source of a module, it will let you specify a .js extension (and then ignore it).

因此在 app.ts ：

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

然后在 app.js 中正确输出，TS正确找到了 import 定义和绑定。

This then outputs correctly in app.js, and TS has found the import definitions and bindings correctly.

这有一个优点/要注意的地方/注意：TS只会忽略 .js 扩展名，并使用通常的文件发现功能加载其余路径。这意味着它将导入 library.ts ，但它还会找到定义文件，例如 library.d.ts 或在 library / 文件夹中导入文件。

This has one advantage/gotcha to be aware/careful of: TS just ignores the .js extension and loads the rest of the path with the usual file discovery. This means that it will import library.ts, but it would also find definition files like library.d.ts or import files in a library/ folder.

如果将这些文件连接在一起，则可能需要使用最后一种情况放入 library.js 输出，但是要做到这一点，您将要查看很多嵌套的 tsconfig.json 文件（混乱），或者可能是另一个库的预编译输出。

That last case might be desirable if you're joining those files together into a library.js output, but to do that you're going to be looking at either lots of nested tsconfig.json files (messy) or possibly the pre-transpiled output of another library.

这篇关于如何使TypeScript输出有效的ES6模块导入语句？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！