Search code examples
javascriptecmascript-6babeljs

Why does Babel 6 move semicolons from where they appeared in the original source?

In this simple Babel (6.1.18) example babel --presets es2015 test.js transforms:

'use strict'; // enable strict mode

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

to

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

It's mostly out of curiosity but I would be interested to better understand why: - the location of the semicolon in the first line has been moved into a separate line - the syntax of the iife has been changed from (function () {}()); to (function () {})();

Solution

  • An Abstract Syntax Tree does not retain formatting information, e.g. whether the calling parenthesis are outside or inside the grouping operator. In fact, the grouping operator ((...)) is not even represented in the AST.

    That's why people are working on a Concrete Syntax Tree implementation, which would contain such information and what could then be used by code generators to stay closer to the original source code.

    There are tools which are able to reuse the original code if that part of the code didn't change (e.g. recast), but because Babel primarily focused on transpiling code for the browser, this was probably of less importance. This may change now that Babel became more of a platform.