Introduction to Babel

In this tutorial, we learn the Babel . Babel is a free and open source JavaScript compiler and converter web ECMAScript 2015+ code to the backward compatible version JavaScript in current and older browsers or environments.

Babel enables software developers to write source code in their preferred programming language or style, and use Babel translate it into JavaScript , which is the most commonly used programming language in browsers today.

The following is the usage scenario Babel

• Syntax conversion.
• Polyfill features that are missing in the target environment.
• Source code conversion (codemods)

Example:

For example, to ES2015 the arrow function in ES5 into 061001f7ae40d7:

[1, 2, 3].map((n) => n + 1);

The compiled ES5 is as follows:

[1, 2, 3].map(function (n) {
  return n + 1;
});

ES5 of code are the same, but because ES2015 and 061001f7ae4150 are different, the compiled code is also different.

Babel operation mode and plugins

Babel is divided into three stages: parsing, transformation, and generate.

Babel itself does not have any conversion function. The conversion function of Babel is realized through plugins, which decompose the conversion functions into individual plugins. Therefore, when we do not configure any plug-ins, the code and input Babel

There are two types of plug-ins:

• Grammar plugin: After we add the grammar plugin, in the parsing step, Babel can parse more grammars.
• Translation plug-in: After adding the translation plug-in, the source code is converted and output in the conversion step. This is also the most essential requirement for Babel

The same type of grammar may have both a grammar plug-in version and a translation plug-in version. If we use the translation plug-in, there is no need to use the grammar plug-in.

preset

preset is a combination of a series of pre-defined plug-ins, used to convert specific grammar into the grammar used in the current environment, avoiding choosing plug-ins individually.

preset divided into the following categories:

• Official content currently includes env , react , flow , minify , typescript etc.

• stage-x , which contains the latest draft specifications of the year, updated every year. It can be subdivided into:

  • Stage 0 : Strawman: Just an idea, there may be a Babel plug-in.
  • Stage 1 : Proposal: This is worth following up.
  • Stage 2 : Draft: Initial specification.
  • Stage 3 : Candidate: Complete the specification and implement it on the browser.
  • Stage 4 : Finished: Will be added to the next annual version release.