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 “new standard” (with new functionality) without worrying that this new functionality may not be supported by browsers.
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:
- Code generation.
Step 1. Parsing
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:
And now that’s all. I hope I helped you understand how Babel works.
P.S. Don’t judge me harshly, as this is my first article and I’m always open to feedback ❤️