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

时间:2017-08-29 06:51:13

标签: javascript typescript es6-modules

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

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

这是有意义的 - 在Node应用程序或像WebPack这样的捆绑器中,它们只需要模块的名称,然后可以花费一些额外的时间来发现保存代码的特定文件。在网上可能会浪费很多往返旅行('library'library/index.jslibrary/library.jslibrary.js require()只有"module": "es6"tsconfig.json没有关心,但我们必须在网上。

TypeScript支持ES6模块(在library.ts中设置export function myFunction(...) { ... } )但它似乎使用文件发现方法...

假设我有app.ts

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

然后在'library'

'library'

但是,在转换时这没有改变 - TS输出仍然具有文件发现的<script type="module" src="app.js"></script> 名称,但这不起作用。这会引发错误,因为找不到import {myFunction} from './library.js'; var x = myFunction(...);

import

为了使ES6模块工作,TS输出需要引用特定文件:

<script type="module">

如何使TS输出有效的ES6模块span{ display:inline; border-top:dotted 5px #000; border-bottom:thick double #ff0000; text-decoration: line-through wavy aqua; font-size:5rem; width: auto; }语句?

注意:我询问如何使捆绑器将TS输出连接到单个文件中。我特别想使用<span>Some Text</span>

单独加载这些文件

2 个答案:

答案 0 :(得分:3)

这是一个bug in TypeScript,虽然有一些关于是否应该修复的争论。

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

所以在app.ts

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

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

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

如果您将这些文件一起加入library.js输出中,那么最后一种情况可能是合乎需要的,但为了做到这一点,您将会看到大量嵌套{{1} }文件(凌乱)或可能是另一个库的预先编译的输出。

答案 1 :(得分:2)

编译器采用模块类标志:

--module ES2015

你还需要针对ECMAScript 6/2015 ...

--target ES2015

您需要将模块类型和编译目标都作为ECMAScript 2015最小值来进行“零转换导入”。

您的导入语句应该看起来在两个示例之间:

import {myFunction} from './library';

附加说明

关于模块解析仍然有很多讨论......有TC39 specificationWHATWG specification - 加上节点目前仍然没有文件扩展...看起来像RequireJS可能活得比我们想象的还要长......请看:

The TypeScript thread for supporting file extensions during import transpilation(即是否会添加文件扩展名?)。

建议

坚持使用模块加载器,例如RequireJS或SystemJS。这也意味着您的模块可以分别使用UMD或系统模块类型在浏览器和服务器之间共享。

显然,一旦ECMAScript讨论得出结论,就需要重新审视。