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

Sru*_*thi 5 javascript compilation commonjs typescript tsconfig

我试图了解打字稿模块编译器选项。

我经历了打字稿文档-docs 它说模块选项是Specify module code generation

这意味着什么?

这是否意味着如果我将module选项设置为commonjs,则编译器会将代码编译为commonjs?但是然后我们有类似的选择esnext, es16。在完成Docs:esnext,es6和es2015模块目标之间的区别之后,我明白了import() expressions are understood in esnext。无论如何,编译器的目的是将代码编译成浏览器可理解的语法(commonjs)。因此,将代码编译为给定的模块类型没有意义。

那么,这是否意味着您提供的模块类型会告诉编译器以哪种语法编写代码?意味着必须从哪个代码将其编译为commonjs?但是然后我们有了commonjs经常使用的模块类型,但是我们几乎从不使用纯commonjs语法编写代码。

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

我还通过了解tsconfigtsconfig模块选项中的“目标”和“模块” -“系统”是指SystemJS吗?

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

tsconfig.json

{
  "compilerOptions: {
    "module": "esnext"
  }
}
Run Code Online (Sandbox Code Playgroud)

Zwi*_*ers 30

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

  • 什么Specify module code generation意思?

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

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

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

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 功能,例如letconst代码中(出于可读性/性能/其他原因)。在这种情况下,您将在 tsconfig 中设置"module"to"commonjs""target"to "ES2015"

无论如何,编译器的目的是将代码编译成浏览器可理解的语法(commonjs)。

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

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

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

  • 这是对一个复杂主题的非常好的、清晰的解释。谢谢。 (4认同)
  • 这就是我找到的最好的解释 (3认同)
  • 我在其他地方找不到很好的解释:) (2认同)
  • 老实说,这可能是 TypeScript 新手最困惑的事情。开发人员应该添加“compiledModule”和“compiledJsVersion”之类的别名或类似的东西(“目标”到底来自哪里?) (2认同)