了解tsconfig中的"目标"和"模块"

Question

下面是我的tsconfig.json文件,其中我将目标设置为"es5",模块设置为"es6"

{
   "compilerOptions": {
   "target": "es5",    
   "module": "es6"
   }

}

我的问题是因为模块[import/export]是es6和NOT es5的一部分,转换后的javascript代码不应该有import/export语句.但即使目标是es5,生成的javascript代码也有导入/导出语句,怎么可能？

Answer 1

模块系统独立于语言实现.ES6(ES2015)模块使用导入/导出语法,由模块加载器来解释它.

在此您已使用ES2015模块系统进行了指定,因此可以启用ES6模块语法.

Javascript本身可以针对ES5,并且仅使用ES5功能,但理论上可以使用具有ES2015模块语法操作的代码的模块加载器.虽然它是可能的,但它不一定是你想要做的事情.将CommonJS或AMD模块与ES5 Javascript一起使用更为常见.

显然,在Typescript 2.0之前,甚至不允许这种组合.在Typescript 2.0发行说明中,它说:

"以前标记为无效的标志组合,现在支持目标:es5和'module:es6'.这应该有助于使用基于ES2015的树状振动器,如汇总."

Answer 2

为了补充之前的答案，2020 年有 4 个 TS 配置选项定义模块分辨率和编译输出：

• module.
• target.
• lib.
• moduleResolution.

前 3 个影响您的输出，而后者影响编译器搜索您的模块以解析它们并捆绑的方式。

这里有一篇关于这些选项的精彩而简洁的文章：Typescript 混淆：tsconfig.json 模块、moduleResolution、target 和 lib 解释 | 作者：Tom Medema | 中。

此外，还有一个关于模块解析的文档：TypeScript: Handbook - Module Resolution。