We now have a youtube channel. Subscribe!

Babel.js | ES6 Code Execution

Babel.js | ES6 Code Execution


Hello folks! Welcome back to a new section of our tutorial on BabelJS. In this tutorial, we are going to be studying about Babel.js ES6 Code Execution.

BabelJS is a JavaScript(js) transpiler, which converts new features added to JavaScript into ES5 or to react based on the preset or plugin given. ES5 is one of the oldest forms of Javascript and is supported to run on new and old browsers without any problems. In most of the examples in this tutorial, we've transpiled the code to ES5.

We have seen many features such as arrow functions, classes, promises, asynchronous functions, generators, etc. included to ES6, ES7 and ES8. When any of the newly added features are used in old browsers, it throws errors. Babel.js helps in compiling the code, which is backward compatible with older web browsers. We have seen that es5 works perfectly fine on older browsers without any issues. So putting the project environment details into consideration, if it is required to be running on older web browsers, we can make use of any new feature in our project and compile the code to ES5 using babel.js, and use it in any web browsers without any issues.

Example

Let us consider the following example for a better understanding -

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script type="text/javascript" src="index.js"></script>
   </body>
</html>

index.js

var _foo = () => {
   return "Hello World"
};

alert(_foo());

Output

When we run the above html in the Chrome browser, we will get the following output -

Chrome_browser


When the html is run in Firefox, it generates the following output -

generate

And when the same HTML is run in Internet Explorer, it generates theh following syntax error -

internet_explorer

We have utilized the ES6 Arrow function; the same does not work on all web browsers as seen above. In order to get this working, we have babeljs to compile the code to ES5 and use it in all browsers.

We will compile the js file to es5 making use of babeljs and check again in the browser.

compile_es5

In html file, we are going to use index_new.js as shown below -

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script type="text/javascript" src="index_new.js"></script>
   </body>
</html>

index_new.js

"use strict";

var _foo = function _foo() {
   return "Hello World";
};

alert(_foo());

Chrome Browser Output

chrome_output

Firefox Browser Output

firefox_browser_output

IE Browser Output

ie_browser_output


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we will be discussing about BabelJS Project Setup using Babel 6.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain