理解tsconfig中的"target“和"module”

Question

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

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

}

我的问题是，因为模块导入/导出是es6的一部分，而不是es5的一部分，所以转换后的javascript代码不应该有导入/导出语句。但是，即使目标是es5，生成的javascript代码也有导入/导出语句，这是怎么可能的呢？

Answer 1

模块系统独立于语言实现。ES6 (ES2015)模块使用import/export语法，它由模块加载器来解释。

在这里，您已经指定了使用ES2015模块系统，因此启用了ES6模块语法。

JavaScript本身可能以ES5为目标，且仅使用ES5特性，但理论上可以将模块加载器与使用ES2015模块语法代码一起使用。虽然这是可能的，但这不一定是您想要做的事情。将CommonJS或AMD模块与ES5 JavaScript一起使用更为常见。

显然，在TypeScript 2.0之前，这种组合是不允许的。在TypeScript 2.0发行说明中，它说：

“以前被标记为无效的标志组合，现在支持target: es5和‘module:es6’。这将有助于使用基于ES2015的树振动器，如rollup。”

Answer 2

为了补充前面的答案，2020年有4个TS配置选项，用于定义模块解析和编译输出：

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

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

这里有一篇关于这些选项的优秀而简洁的文章：Typescript confusion: tsconfig.json module, moduleResolution, target & lib explained | by Tom Medema | Medium。

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