将Typescript编译为本机浏览器ES模块

Question

如何编译Typescript以与支持ES modules的浏览器一起使用？

我在tsconfig中将<script type="module">与module=es2015一起使用，但是我无法编写适用于编译器和运行时的导入路径。

浏览器的需求需要完全限定的导入路径和Typescript doesn't convert the import extension during compilation。

例如，以下TS代码段在编译过程中不会更改。

import foo from "./foo.ts";
import bar from "./bar";

在浏览器中运行时，它将发出两个网络请求，以请求不存在的文件。

GET foo.ts -> (should be) GET foo.js
GET bar -> (should be) GET bar.js

Answer 1

目前唯一的实现方法是在TypeScript导入中使用.js（即使从技术上来说文件是.ts）。

// index.ts
import foo from "./foo.js";

// foo.ts
export default "foo";

这仅适用于TypeScript 2和更现代的版本。有关更多背景信息，请参见此GitHub issue。