为什么 Babel 6 将分号从原始源中出现的位置移开？

Question

在这个简单的 Babel (6.1.18) 示例中

babel --presets es2015 test.js

转换：

'use strict'; // enable strict mode

(function () {
    const A = 3;
}());

到

'use strict' // enable strict mode
;
(function () {
    var A = 3;
})();

这主要是出于好奇，但我有兴趣更好地理解原因： - 第一行中分号的位置已移至单独的行中 - iife 的语法已从

(function () {}());

更改为

(function () {})();

Answer 1

摘要语法树不保留格式信息，例如调用括号是在分组运算符外部还是内部。事实上，分组运算符 (

(...)

) 甚至没有在 AST 中表示。

这就是为什么人们正在研究具体语法树实现，其中包含此类信息以及代码生成器可以使用的内容以更接近原始源代码。

如果这部分代码没有更改，有些工具可以重用原始代码（例如 recast），但由于 Babel 主要专注于为浏览器转译代码，因此这可能不太重要。现在 Babel 变得更像是一个平台，这种情况可能会改变。

Answer 2

Babel 是一个转译器，其工作方式与编译器非常相似：

1. Babel 对您的代码执行词法分析。这意味着它被标记化了。

   (function(){})()

   成为令牌流，例如

   "(" "function" "(" ")" ...

2. babel 创建一个语法树。代表程序的线性标记流将转换为如下所示的树：

3. babel 然后对您的代码执行语义分析。这是它检查错误、确保您的代码是合法的 ECMA6 代码、添加缺少的分号并确保语法树是合法程序的时候

4. babel 从语法树生成 javascript 代码

因此您可以看到，有几种方法可以编写相同的代码，但是当执行语义分析和代码生成时，会生成相同的代码。