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.
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 -
READ: Babel.js | CLI
When the html is run in Firefox, it generates the following output -
.jpg "generate")
And when the same HTML is run in Internet Explorer, it generates theh following syntax error -
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.
We will compile the js file to es5 making use of babeljs and check again in the browser.
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
Firefox Browser Output
.jpg "firefox_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.
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.