Why Does Babel 6 Some (unnecessary) Code Transformations

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' // enab

Solution 1:

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.

Solution 2:

Babel is a transpiler and works in a very similar way to a compiler:

1. Babel performs lexical analysis on your code. This means it gets tokenized. (function(){})() becomes a stream of tokens such as "(" "function" "(" ")" ...

2. babel creates a syntax tree. The linear stream of tokens representing your program is converted into a tree like this one:

3. babel then performs semantic analysis on your code. This is when it checks for errors, makes sure your code is legitimate ECMA6 code, adds missing semicolons and makes sure the syntax tree is a legitimate program

4. babel generates javascript code from the syntax tree

So you can see that there are a few ways you might be able to write the same code, however when semantical analysis and code generation are performed, the same code is generated.