Babel:-
A bit about Babel:-
Babel is a transpiler for JavaScript that is popular among developers for its ability to turn ES6 or ES7 into code that can run on your browsers and devices.
Transpiling is the process of converting newer language syntax that old browsers can’t understand into the old syntax they recognize.
This is another plus point about using Babel. You as the developer can write your code in ES6 or ES7, which as reduces the size of our code. Babel will compile our code to our JavaScript code to browser compatible code.
This is important because most devices and browsers still support older well-established standards like ES5. So developers can write their code in latest conventions and not worry about errors due to incompatibility.
It makes available all the syntactical sugar that was added to JavaScript with the new ES6 specification, including classes, fat arrows and multiline strings.
We can also optionally use it to transpile TypeScript into regular JavaScript that will run in a browser.
Installation:-
Babel comes packaged as an node module. Installation, as you might expect, is via npm:
npm install –save-dev babel-cli
Classes:-
Old style JavaScript is class free. Objects inherit directly from other objects, so any object can be the parent (superclass) of any other object.
Any function can be a constructor function, and calling it with the new keyword will yield a new object.
This is all very cool and JavaScripty, but it understandably makes C# and Java developers a bit antsy. They are used to classical inheritance, so ES6 introduces the class keyword. This lets us define functions which can only be used as constructors.
Multiline Strings:-
ES6 also has a new, sugary way of defining strings. The backtick symbol (` (bottom left on your Macintosh keyboard)) lets you create multiline strings. This is especially helpful when defining templates in JavaScript. Here’s a simple HTML template:
const template = `
<div>
<h1>hello {{name}}</h1>
</div>
`
This compiles to:
var template =
“<div>
<h1>hello {{name}}</h1>
</div> “
Fat Arrows:-
Fat Arrows give us a nice syntax for defining anonymous functions.
We can write this:
(p, q) => {
return p + q;
}
Babel gives us this:
(function (p, q) {
return p + q;
});
Example:-
If you write the following JavaScript code (which follows the ES6 standards):
const numbers = [ 5, 6, 7];
console.log(numbers.map(number => number + 4));
Babel will compile it to:–
var numbers = [ 5, 6, 7];
console.log(numbers.map(function (number) {
return number + 4;
}));
This is another plus point about using Babel. You as the developer can write your code in ES6 or ES7, which as we can see above reduces the size of our code. Babel will compile our code to our JavaScript code to browser compatible code.
Version:-
Babel 6 was released in 2015. Since then, it has gone through over 4000 commits and 50 pre-releases. Now, the people at Babel have brought us it’s next major update: Babel 7. Current version is v7. 20.7
ES6 is mainly sugar on top of ES5. The JavaScript under the hood remains the same prototypical, list processing language we are used to. ES6 gives us some nice syntax that ultimately transpiles to fairly plain, ordinary JavaScript.
Some of this sugar is for the benefit of Java/C# folk who initially often find prototypical inheritance confusing.