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.


Types Of Transpilers

There are two types of Transpilers for JavaScript

1 ) Run Time Transpilers:

As the name suggests this type of transpilers transpiles your code at run time. Keep in mind that if you have a lot of code then this will impact the performance of you code and will make it slow.

2 ) Compile Time Transpilers:

These type of transpilers will transpile your code into a separate file before running it. This will have improved performance and is recommended for big projects.

JavaScript has a number of different Transpilers some of the most popular ones are Bable, Tracure and Closure.


If we take a look at the compatibility chart here , under the section of Compilers/polyfills we see that Babel is the one that supports most of the ES6 features. And that is what we will be using.

We will be using babel-standalone i.e, we will include a babel file in our html document and that will make run time changes and make our ES6 code work.


Using Babel

Now it’s time to use babel we will do that by creating a simple html document¬† we will name it as index.html and put the following code in it

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.



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
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:
Prantik Vaghela

Prantik Vaghela (uncutAcademy)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)