Babel

Babel is a javascript transcompiler. In other words, it is used to convert a code written in a version of javascript (for example, written in EcmaScript7) to EcmaScript5 code that all browsers support. In addition, it can convert JSX files used by frameworks such as reactjs etc. to EcmaScript5.

Programming languages ​​are actually similar to the languages ​​people use. Users who write programs with a programming language actually tell computers what to do in orders or processes with what they write. It communicates with IIS, Apache etc. that run the code written by programmers. Just as we speak Turkish while trying to explain ourselves, programmers use a language that the computer can understand to explain themselves to the computer. If the other person cannot understand the language we use, what we say will not matter much. For the Javascript programming language, these environments are the nodejs environment or browsers. Run the javascript codes written by the programmer in one of these two environments. Actually, there are different environments that run the javascript code, but this is not the subject of this article. Just as new words or concepts or names appear in the language used by Turkish people, the Turkish Language Institution adds these concepts or words to the current dictionary, and there are innovations in javascript. For these innovations, the version of the programs written using the version code in javascript can be followed.

Here, transpiler software such as babeljs make the javascript codes that we have written in different versions work by converting them to the version used by the environment by running the browsers or javascript.

To put it briefly; Babel is an open source JavaScript transcompiler that mostly converts ECMAScript 2015+ code to a backward compatible version to make it run by legacy JavaScript engines.

Babel can convert JSX syntax! You can install this preset with

npm install — save-dev @babel/preset-react

and add @babel/preset-react to your Babel configuration.

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.

// 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:

// 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;

});

Requirements for Babel :

• A code editor like atom, sublime text or Visual studio code.
• Node should be installed on the machine with npm too.

We will install Babel using Node. Open your text editor, then create your directories structure like the one below:

If you know how node works then you know about node_modules, package.json, and package.lock.json. These are automatically formed once we run some commands.
Now, open the command line and set the path to the directory of the folder then write these lines in the cmd:

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install nodemon --save-dev

The first npm commands will install babel dependencies and the second will is used to install nodemon which allows us to update the browser content without refreshing it.
After entering the command we will get:

As we can see in the above image, the command that we used to install babel dependencies are now visible in our ‘package.json’ file.
It is also important to add the below line inside the .babelrc file which we have in our project directory.

Now we finally need to add scripts into our ‘package.json’ file.

"start": "nodemon --exec babel-node src/app.js" // inside your scripts tag

The final ‘package.json’ will look like this:

Now we are all set we just need to write normal ES6, 7, 8 code in our app.js file and run it with ‘npx babel filename’ command where ‘filename’ is replaced by app.js here, and we will get the ES5 output in the console.

// next generation javascript code

let tom= () => {};

let ted= (b) => b;

const usingMap = [1, 2, 3].map((number) => number * 2);

console.log(usingMap); // [2, 4, 6]

var stefan= {

_name: "Stefan",

_friends: ["Stefan", "Tailor"],

printFriends(){

this._friends.forEach(

f =>console.log(this._name + " knows " + f));

}

};

console.log(stefan.printFriends());

See you on my next articles! :)