tsconfig 中的模块选项有什么用?

What is module option in tsconfig used for?

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

我浏览了 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 语法编写代码。

Whosebug 回答说 module specifies module manager。我不明白那是什么意思。

我也经历过 and

None 这些似乎正确地回答了我的问题。

tsconfig.json

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

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

  • Specify module code generation是什么意思?

"module" in tsconfig.json 告诉 Typescript (TS) 编译器什么模块语法 在文件编译为 Javascript (JS).

时使用

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

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

ES 模块现在是 JS 中 importing/exporting 模块的内置标准,但在没有本地解决方案的时候,其他模块系统被设计出来:这就是为什么我们也有 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 版本有时包含模块 import/export 的更多功能。 将 "module" 设置为 "ESNext" 可启用对这些功能的支持,这些功能通常尚未添加到官方规范中。例如 import(...) 表达式是 dynamic import.

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

"module" 设置不会影响代码的其余部分,"target" 用于此,并指定输出应与哪个 JS 版本兼容。 这已在其他线程中进行了解释,为了清楚起见,我只是将其添加到此处。 假设您想在 Node 项目中使用 require(...)module.exports = {...},但还希望代码在代码中使用 ES2015 功能,例如 letconst(对于 readability/performance/other 原因)。 在这种情况下,您可以在 tsconfig.

中将 "module" 设置为 "commonjs" 并将 "target" 设置为 "ES2015"

反正编译器的目的就是把代码编译成浏览器可以理解的语法(commonjs)。

是的,编译器必须将 TS 代码转换为浏览器可以理解的 JS。 但是,JS 不再局限于浏览器,例如 Node 可以运行在其他环境(服务器)中。 CJS 实际上是作为服务器端模块格式而 AMD 模块 were/are 用于浏览器 imports/exports.

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

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