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 is an asynchronous function, which returns an implicit 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.
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();
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.
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();
npx babel asyncawait.js --out-file asyncawait_es5.js

"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_modules\babel-polyfill\dist\polyfill.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_modules\babel-polyfill\dist\polyfill.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
** 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.
let sqr = 9 ** 2;
console.log(sqr);
81

let sqr = 9 ** 2;
console.log(sqr);
To transpile the exponentiation operator, we need to install a plugin to be installed as follows −
npm install --save-dev babel-plugin-transform-exponentiation-operator

Add the plugin details to .babelrc file as follows −
{
   "presets":[
      "es2015"
   ],
   "plugins": ["transform-exponentiation-operator"]
}
npx babel exponeniation.js --out-file exponeniation_es5.js

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);
This feature gives true if the element passed to it is present in the array and false if otherwise.
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'));
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.
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'));
npx babel array_include.js --out-file array_include_es5.js

'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_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="array_include_es5.js"></script>
   </body>
</html>
 Print
 Add Notes
 Bookmark this page