Three steps to understanding Babel

#babel #javascript #compiler #webpack

Babel is a transcompiler, without which development would be much more difficult and not as convenient as now.

So what is the convenience of using Babel and what opportunities does it provide?

First of all, you need to understand the main task of Babel — the ability to write code in new standard (with new functionality) without worrying that this new functionality may not be supported by browsers.

The bottom line is that JavaScript is not standing still and is evolving rapidly. Due to this, we (developers) receive every year additions to the functionality of the language in the form of a new standard (so-called ECMAScript or simply ES).

But the fact that JavaScript is updated every year does not mean that the new functionality becomes available in browsers immediately. Everything is exactly the opposite. This is a fairly long process that takes a long time.

But we are developers and do not want to wait so long to start using something very cool and something that really simplifies our lives. That’s where Babel comes on stage.

What is he doing? Babel takes the code we wrote with the new functionality and converts it into an analog code, but older standard. This is done because it is this code browser understands without problems.

The following is an example of a transcompilation taken from the official Babel website.

It is important to note that there are no disadvantages to such a transformation (transcompilation). Our project doesn’t get slower or anything like that. So you can not worry.

To get the final code understandable to the browser, Babel performs 3 basic steps:

Parsing.
Transformation.
Code generation.

Step 1. Parsing

In the first step, the input data is code written by us with new functionality. Babel takes and converts this code into AST (Abstract Syntax Tree). AST looks like a regular JavaScript object (key: value).

It is not necessary to delve into the specified code, we will simply single out the most important idea — the AST-object contains a description of what our code is (functions, arguments, operators, destructuring, or simply declaring changes).

Module babel-parcel is responsible for this operation.

Step 2. Transformation

In this step, the input data is the AST object obtained from the previous step. As we remember, this object contains a description of what we use in the code (including the new functionality).

The main idea of this step — convert the input AST object with the new functionality into the same AST object with the old functionality. That is, when passing through the AST object there are keys and their values, which represent the new functionality and therefore must be replaced. As mentioned earlier, this is done so that the browser can perceive our code correctly.

Two modules are responsible for this step (transformation) at once — Babel-traverse and Babel plugin/presets, which have their tasks:

babel-traverse — a module that can parse the AST object and replace the required values according to the key.
babel plugin/presets — a module that contains a set of presets responsible for a single functional (usually 1 preset = 1 functional, where functional can be some independent unit — destructuring, function, etc.).

Step 3. Code generation

Last step. Input data — AST object, but with the old functionality (which we got from the previous step). All that remains is to turn it into a simple JS code that will be executed by the browser in the future.

The babel-generator module is responsible for this action.

At the output we get the code below (in the block on the right).

The block on the left is what we have from the beginning, our code, which in particular contains new functionality (creation of variables through const, arrow functions and a shortened version of the return from the same functions).

Next is the “magic” described above, namely 3 steps: parsing, transformation and code generation. Code generation is the end result and what is contained in the image in the right block.

Schematically, the entire life cycle can be depicted as follows: