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

Question

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

我浏览了打字稿文档 - docs 它说模块选项是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 语法编写代码。

what is the purpose of tsconfig.json?stackoverflow 回答说module specifies module manager。我不明白那是什么意思。

我也经历过Understanding “target” and “module” in tsconfig 和tsconfig module options - does 'System' refer to SystemJS?。

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

tsconfig.json

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

Answer 1

TLDR; tsconfig.json 中的module 告诉编译器对发出的 .js 文件中的模块使用什么语法。常用的值为"commonjs"（require/module.exports）或"ES2015"（导入/导出关键字），但也有其他的模块系统。 module 影响发出代码的模块语法，而target 影响其余部分。

• Specify module code generation 是什么意思？

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

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

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

ES 模块现在是在 JS 中导入/导出模块的内置标准，但是在没有原生解决方案的时候设计了其他模块系统：这就是我们周围还有 CJS、AMD 和 UMD 模块的原因。它们并非都过时了，CJS 在 Node.js 中仍然被大量使用，例如 AMD 模块加载器允许非 JS 导入，这在某些情况下很有用。 如今，所有现代浏览器和 Node 13.2.0+ 都支持 ESM 格式 (see this page for compatibility data and more background on modules)。

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

较新的 JS 版本有时包含更多的模块导入/导出功能。 将"module" 设置为"ESNext" 可以支持这些通常尚未添加到官方规范中的功能。例如import(...) 表达式，即dynamic import。

是不是说如果我把module选项设为commonjs，那么编译器会将代码编译成commonjs？

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

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

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

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

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