时间戳

首页 > 解决方案 > tsconfig 中的模块选项是用来做什么的？

javascript - tsconfig 中的模块选项是用来做什么的？

问题描述

我正在尝试了解 typescript 模块编译器选项。

我浏览了打字稿文档-文档 它说模块选项是Specify module code generation.

这意味着什么？

这是否意味着如果我将模块选项设置为commonjs，那么编译器会将代码编译为 commonjs？但是我们有类似的选项esnext, es16。在我浏览了Docs: Difference between esnext, es6, es2015 module targets之后，我明白了import() expressions are understood in esnext。无论如何，编译器的目的是将代码编译成浏览器可理解的语法（commonjs）。因此将代码编译为给定的模块类型没有意义。

那么这是否意味着您提供的模块类型会告诉编译器代码是用什么语法编写的？意味着它必须从哪个代码编译到commonjs？但是我们有commonjs经常使用的模块类型，但我们几乎从不使用纯 commonjs 语法编写代码。

tsconfig.json 的目的是什么？stackoverflow 回答说module specifies module manager。我不明白那是什么意思。

我还了解了 tsconfig和tsconfig 模块选项中的“目标”和“模块”——“系统”是指 SystemJS 吗？.

这些似乎都不能正确回答我的问题。

tsconfig.json

{
  "compilerOptions: {
    "module": "esnext"
  }
}

标签： javascripttypescriptcompilationcommonjstsconfig

解决方案

TLDR；module在 tsconfig.json 中告诉编译器对发出的 .js 文件中的模块使用什么语法。经常使用的值是"commonjs"(require/module.exports) 或"ES2015"(import/export 关键字)，但还有其他模块系统。module影响发出代码的模块语法，同时target影响其余部分。

  • 是什么Specify module code generation意思？

"module"在 tsconfig.json 中告诉 Typescript (TS) 编译器在将文件编译为 Javascript (JS) 时使用什么模块语法。

当你在 tsconfig.json 中设置"module"为时"commonjs"，这意味着编译后的 .js 文件中的模块将使用 commonJS (CJS) 语法，因此可以进行导入和导出var x = require(...)。module.exports = {...}例如，如果您更改"module"为"ES2015"，编译后的代码将使用ES2015 模块语法中使用的importand关键字。export有关其他语法的概述，您可以查看此处。

CJS 有几种不同的模块系统，而本机 ES 模块 (ESM) 格式可能是最广泛使用的。选择什么取决于您的要求。如果它是用于使用 Node.js 的服务器端项目，那么可能是 CJS，如果它是用于 Angular 前端应用程序而不是 ESM（或他们自己的 NgModules，但这超出了这里的范围）。有点类似的情况是库和包装设计以及您希望如何将它们展示给消费者。这取决于什么样的用户将使用代码，他们在使用什么（浏览器、节点）以及哪个模块系统最适合这项工作？

ES 模块现在是在 JS 中导入/导出模块的内置标准，但在没有原生解决方案的时候设计了其他模块系统：这就是我们周围还有 CJS、AMD 和 UMD 模块的原因。它们并不是都过时了，CJS 在 Node.js 中仍然被大量使用，例如 AMD 模块加载器允许非 JS 导入，这在某些情况下很有用。如今，所有现代浏览器和 Node 13.2.0+ 都支持 ESM 格式（有关兼容性数据和更多关于模块的背景信息，请参阅此页面）。

但是我们有像 esnext 这样的选项

较新的 JS 版本有时包含更多的模块导入/导出功能。设置"module"为"ESNext"启用对这些通常尚未添加到官方规范中的功能的支持。比如动态导入import(...)的表达式。

这是否意味着如果我将模块选项设置为commonjs，那么编译器会将代码编译为commonjs？

该"module"设置不会影响其余代码，"target"而是用于此设置，并指定输出应兼容的 JS 版本。这已经在其他线程中进行了解释，为了清楚起见，我只是在这里添加它。假设您想在 Node 项目中使用require(...)和module.exports = {...}，但还希望代码利用代码中的和等 ES2015 功能let（const出于可读性/性能/其他原因）。在这种情况下，您将在 tsconfig 中设置"module"to"commonjs"和"target"to 。"ES2015"

无论如何，编译器的目的是将代码编译成浏览器可理解的语法（commonjs）。

是的，编译器必须将 TS 代码转换为浏览器可以理解的 JS。但是，JS 不再局限于浏览器，例如 Node 可以在其他环境（服务器）中运行。CJS 实际上旨在作为服务器端模块格式，而 AMD 模块用于/用于浏览器导入/导出。

那么这是否意味着您提供的模块类型会告诉编译器代码是用什么语法编写的？

它告诉编译器以什么语法将模块写入输出 .js 文件

推荐阅读