首页 文章

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

提问于
浏览 次
7

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

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

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

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

假设我有 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(...);

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

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

javascript typescript es6-modules

2 回答

  • 2

    这是一个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/ 文件夹中找到 library.d.ts 之类的定义文件或导入文件 .

    如果您将这些文件一起加入到 library.js 输出中，那么最后一种情况可能是可取的，但要做到这一点，您将要查看大量嵌套 tsconfig.json 文件（杂乱）或可能是另一个库的预转换输出 .

    回复于
  • 3

    编译器采用模块类标志：

    --module ES2015

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

    --target ES2015

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

    您的import语句应该看起来在两个示例之间：

    import {myFunction} from './library';

    附加说明

    关于模块解析仍然有很多讨论...有TC39 specification，WHATWG specification - 加上节点目前仍然没有文件扩展...看起来像RequireJS可能比我们想象的更长寿...请看到：

    The TypeScript thread for supporting file extensions during import transpilation（即它会添加文件扩展名吗？） .

    推荐

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

    显然，一旦ECMAScript讨论得出结论，这将需要重新审视 .

    回复于

相关问题