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

问题描述 投票:7回答:1

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

我浏览过打字稿文档-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 tsconfigtsconfig module options - does 'System' refer to SystemJS?

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

tsconfig.json

{
  "compilerOptions: {
    "module": "esnext"
  }
}
javascript typescript compilation commonjs tsconfig
1个回答
0
投票

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模块语法中使用的importexport关键字。有关其他语法的概述,请查看here

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

ES Modules现在是用于在JS中导入/导出模块的内置标准,但是当没有本机解决方案时,就设计了其他模块系统:这就是为什么我们周围也有CJS,AMD和UMD模块的原因。它们并非都已过时,Node.js中仍然使用CJS,例如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

*这是否意味着如果我将模块选项作为commonjs,则编译器会将代码编译为commonjs?

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

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

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

*这是否意味着您提供的模块类型告诉编译器以哪种语法编写代码?

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

© www.soinside.com 2019 - 2024. All rights reserved.