了解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发行说明中，它说：

  

＆＃34;以前标记为无效标志组合，现在支持target：es5和'module：es6'。这应该有助于使用基于ES2015的树状振动器，如汇总。＆＃34;

Answer 2

作为对先前答案的补充，到2020年，有4个TS config选项定义模块分辨率和编译输出：

• module。
• target。
• lib。
• moduleResolution。

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

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

此外，还有一个有关模块分辨率的文档：TypeScript: Handbook - Module Resolution。