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

Question

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

让我们以最简单的3个文件为例：my-function-js.js, main-js.js和页-js.html

我的函数-js.js

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

主-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 在您的问题中的理论代码/文件上时，它会生成所需的输出，只要您在 [=12] 中设置目标，它就可以在浏览器中正常工作=] 到 es6 或更高，因为你尝试使用的功能是在 es6:

中引入的

  "target": "es6",

唯一的技巧是，在您的 ts 文件中，您需要包含您希望在导入中生成的 .js 扩展名，或者您不需要包含任何扩展名并配置您的网站服务器能够在浏览器请求不带扩展名的文件时找出浏览器要求的内容。

Compile Typescript to run in the browser using modules