BabelJs Tutorial

BabelJs Useful Resources

Selected Reading

Transpile ES7 features to ES5

BabelJS - Transpile ES7 features to ES5

In this chapter, we will learn how to transpile ES7 features to ES5.

ECMA Script 7 has the following new features added to it −

Async-Await

Exponentiation Operator

Array.prototype.includes()

We will compile them to ES5 using babeljs. Depending on your project requirements, it is also possible to compile the code in any ecma version ie ES7 to ES6 or ES7 to ES5. Since ES5 version is the most stable and works fine on all modern and old browsers, we will compile the code to ES5.

Async-Await

Async is an asynchronous function, which returns an imppcit promise. The promise is either resolved or rejected. Async function is same as a normal standard function. The function can have await expression which pauses the execution till it returns a promise and once it gets it, the execution continues. Await will only work if the function is async.

Here is a working example on async and await.

Example

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

Output

Promise resolved after 5 seconds
hello after await

The await expression is added before the timer function is called. The timer function will return the promise after 5 seconds. So await will halt the execution until the promise on timer function is resolved or rejected and later continue.

Let us now transpile the above code to ES5 using babel.

ES7 - Async-Await

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

command

npx babel asyncawait.js --out-file asyncawait_es5.js

BabelJS - ES5

"use strict";

var timer = function timer() {
   return new Promise(function (resolve) {
      setTimeout(function () {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
var out = async function out() {
   var msg = await timer();
   console.log(msg);
   console.log("hello after await");
};

out();

Babeljs does not compile object or methods; so here promises used will not be transpiled and will be shown as it is. To support promises on old browsers, we need to add code, which will have support for promises. For now, let us install babel-polyfill as follows −

npm install --save babel-polyfill

It should be saved as a dependency and not dev-dependency.

To run the code in the browser, we will use the polyfill file from node_modulesabel-polyfilldistpolyfill.min.js and call it using the script tag as shown below −

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modulesabel-polyfilldistpolyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="aynscawait_es5.js"></script>
   </body>
</html>

When you run the above test page, you will see the output in the console as shown below

Exponentiation Operator

** is the operator used for exponentiation in ES7. Following example shows the working of the same in ES7 and the code is transpiled using babeljs.

Example

let sqr = 9 ** 2;
console.log(sqr);

Output

ES6 - Exponentiation

let sqr = 9 ** 2;
console.log(sqr);

To transpile the exponentiation operator, we need to install a plugin to be installed as follows −

command

npm install --save-dev babel-plugin-transform-exponentiation-operator

Add the plugin details to .babelrc file as follows −

{
   "presets":[
      "es2015"
   ],
   "plugins": ["transform-exponentiation-operator"]
}

command

npx babel exponeniation.js --out-file exponeniation_es5.js

BabelJS - ES5

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

Array.prototype.includes()

This feature gives true if the element passed to it is present in the array and false if otherwise.

Example

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = [ Siya ,  Tom ,  Jerry ,  Bean ,  Ben ];
console.log(names.includes( Tom ));
console.log(names.includes( Be ));

Output

true
true
false

We have to use babel-polyfill again here as includes is a method on an array and it will not get transpiled. We need additional step to include polyfill to make it work in older browsers.

ES6 - array.includes

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = [ Siya ,  Tom ,  Jerry ,  Bean ,  Ben ];
console.log(names.includes( Tom ));
console.log(names.includes( Be ));

command

npx babel array_include.js --out-file array_include_es5.js

Babel-ES5

 use strict ;

var arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
var names = [ Siya ,  Tom ,  Jerry ,  Bean ,  Ben ];
console.log(names.includes( Tom ));
console.log(names.includes( Be ));

To test it in older browser, we need to use polyfill as shown below −

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modulesabel-polyfilldistpolyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="array_include_es5.js"></script>
   </body>
</html>

Output

BabelJS - Transpile ES7 features to ES5

Async-Await

Example

Output

ES7 - Async-Await

command

BabelJS - ES5

Exponentiation Operator

Example

Output

ES6 - Exponentiation

command

command

BabelJS - ES5

Array.prototype.includes()

Example

Output

ES6 - array.includes

command

Babel-ES5

Output

友情链接