ReactJS Introduction to Babel

Babel is a very famous transpiler that basically allows us to use future JavaScript in today’s browsers. In simple words, it can convert the latest version of JavaScript code into the one that the browser understands. The latest standard version which JavaScript follows is ES2020 which is not fully supported by all browsers hence we make use of a tool such as ‘babel’ so that we can convert it into the code that today’s browser understands.

What is a transpiler? 
It is a tool that is used to convert source code into another source code that is of the same level. That is why it is also known as a source-to-source compiler. Both codes are equivalent in nature, considering the fact that one works with the specific version of the browser and one doesn’t. 

Note: It is also good to note that a compiler is totally different from a transpiler as the transpiler converts source code into another source code at the same abstraction level, whereas the compiler converts code into a lower-level code generally. Like in Java, the source code is converted to byte Code which is lower level and not equivalent.

Why do we need Babel? 
The main reason we need Babel is that it gives us the privilege to make use of the latest things JavaScript has to offer without worrying about whether it will work in the browser or not. 

Features of Babel:

• Babel-Plugins: The Plugins are configuration details for Babel to transpile the code that supports a number of plugins, which could be used individually, provided the environment is known.
• Babel-Presets: Babel presets have a set of plugins that instruct Babel to transpile in a specific mode. provided the environment is known.
• Babel-Polyfills: During instances when methods and objects, cannot be transpiled, We can make use of babel-polyfill to facilitate the use of features in any browser.
• Babel-Polyfills: The Command-line interface of Babel has a lot of commands where the code can be easily compiled on the command line. It also has features like plugins and presets to be used along with the command making it easy to transpile the code at once

Simple Example 
Before installing and making use of all the features of the Babel tool, let’s see a simple code of the latest standard version of ES2017 and see what happens to it when we pass it into the Babel engine. 

Code: 

Javascript

// sample new version javascript code
const fun = (x) => {x*2};
const a = () => {};
const b = (x) => x;
[1, 2, 3].map((n)=> n+1);

Some of the above code is not supported in some browsers, so after transpiling through Babel we will get:  

Javascript

/ after transpiling
"use strict";

var fun = function fun(x) {
      x * 2;
};

var a = function a() {};

var b = function b(x) {
      return x;
};

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

In the next article, we will learn how to install Babel and will also see more examples of it.

Reference: https://babeljs.io/docs/en/features-timeline