ES6 For Beginners : Using Babel Transpiler

In this Tutorial we will discuss JavaScript Transpilers in details. We will look at one of the most popular transpiler called babel and see how to get started with Babel.

What Are JavaScript Transpilers ?

As I mentioned in the previous post that ES6 is not fully supported by browsers but ES5 is. So by using a transpiler we are essentially converting the ES6 code that we write to ES5 code and that is being run in the JavaScript engine.

Notice that I said JavaScript engine and not a web browser, as we know JavaScript is no longer bound to web browsers with the advent of Node Js.

You can take a look at the exact definition of transpilers in general on Wikipedia here.

Notice that we are linking to the babel-standalone file on line 4 after which we have written some ES6 code in script tag on line 6-11, the ES6 code used default parameters but we are not concerned with the code as we are learning how to get babel to work and we have achieved that. For the babel code to work we will need to use the type="text/babel" attribute value in place of type="text/javascript". For more on in browser usage of bable read here.

Conclusion

In this tutorial, we took a look at what are JavaScript compilers and how to get started with babel. A thing to keep in mind is that babel or any other transpiler will need to transplie your ES6 code to ES5 code either in run-time or in compile time which may cause some performance issues in big projects. But other than that we are free to use it without any side-effects.

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy