时间戳

首页 > 解决方案 > 没有模块加载器的网络打字稿？

javascript - 没有模块加载器的网络打字稿？

问题描述

目前这对我来说是一个非常令人困惑的话题，我也相信很多其他人。互联网上流传的许多建议似乎非常具有误导性。

我想做什么？

我正在尝试使用纯 TypeScript 和 HTML 构建一个基本网页。我想将编译后的 JavaScript 包含在标准<script>标记中，例如

<script src="javascriptOutput/myCompiledJsFile.js></script>

同时仍然能够使用 TypeScript 的正常模块功能，这意味着将我的代码拆分为不同的文件并将它们导入到myCompiledJsFile.js我包含在我的 HTML 中的主脚本中。

有什么问题？

有了以下内容tsconfig.json，

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
    // ...
  }
}

JavaScript 控制台总是抛出这个错误：Uncaught ReferenceError: exports is not defined.

根据我的阅读，问题似乎在于模块系统被指定为commonjs，如果没有外部模块加载器（如 SystemJS，Webpack 中包含的模块等），它似乎无法工作。

如果我是对的，我认为应该可以在没有这些外部模块加载器之一的情况下使用 TypeScript。但我不知道如何配置 TypeScript 以使浏览器可以在没有Uncaught ReferenceError. 而且我也不知道在哪里可以找到有关哪些浏览器支持哪些模块加载器/模块系统的信息。我是否必须查看浏览器运行的 JavaScript 引擎（例如 Chrome 的 V8）？

我也不想使用任何“黑客”，例如var scripts = {}在编译的 JS 中添加或删除行。

标签： javascripttypescriptwebpackmodulees6-module-loader

解决方案

如果有人想知道：我的问题的解决方案是使用原生 ES 模块系统。这意味着根据浏览器支持的内容选择ES2015或ES2020中的module键。tsconfig.json由于我希望仅在 Chrome (Electron) 中运行我的代码，并且 Chrome 从今天开始完全支持 ES2020，因此我选择ES2020用于我的模块系统。

如果您选择使用这些模块，AFAIK，您需要将type="module"属性添加到您的脚本标签：

<script src="../myJsFolder/myJs.js" type="module"></script>

推荐阅读