使用模块编译 Typescript 以在浏览器中运行

Question

使用 Javascript，我可以使用模块（即import和export语句）并将代码细分到不同的文件中，并让这些代码在浏览器中运行。

让我们看一个由 3 个文件组成的最简单的例子：my-function-js.js、main-js.js和page-js.html

我的函数 js.js

export function myFunctionJs() {
  console.log("here I am, a pure Javascript function");
}

main-js.js

import { myFunctionJs } from "./my-function-js.js";

myFunctionJs();

页面-js.html

<!DOCTYPE html>
<html>
  <body>
    <script type="module" src="./main-js.js"></script>
  </body>
</html>

如果我尝试对 Typescript 执行相同的操作（具有.ts扩展名的文件中的相同代码），我会失败，因为编译器根据提供给编译器的选项生成各种“模块相关” module，但无法简单地维护类似的代码它就是这样，并且让它像 Javascript 与模块一样工作。

我意识到这是一个理论问题，我们应该使用捆绑器等，但我只是想知道是否有一种简单的方法可以让模块在浏览器中工作，只需使用 Typescript 编译器。

Answer 1

当在您问题中的理论代码/文件上运行时tsc，它会生成所需的输出，该输出在浏览器中运行良好，只要您将目标设置为tsconfig.jsontoes6或更高版本，因为您尝试使用的功能是在 es6 中引入的：

  "target": "es6",

唯一的技巧是，在你的 ts 文件中，你需要包含.js你期望在导入中生成的扩展名，或者你不需要包含扩展名并配置你的网络服务器以便能够弄清楚浏览器的内容正在询问何时请求不带扩展名的文件。