Skip to main content

ES6 For Beginners : Using Babel Transpiler

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

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.

 

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.

 

Got A Question?

Hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

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. :-)

  • tweety

    Hello,

    Thanks for this article.

    I tried with firefox (50.0.2) and it’s working.
    But I also tried with internet explorer 11 and it is not working. In the console :

    SCRIPT1006: ‘)’ attendu
    test3.html (8,32)

    • Hey there,
      Thanks for writing in.

      you need to have

      in place of

      The post has been updated.

      Thanks again

      • tweety

        Hi,

        I already tried with the type “text/babel” but it is not working either with firefox or internet explorer.

        The only solution I found is to use the latest version

        With that version it is working in firefox. It’s also working in internet explorer but only with compatibility mode disable. With enable, you got SCRIPT1010: Identificateur attendu
        babel.min.js (1,854)

        Don’t know since which version of babel standalone and/or browser version it’s working but with all latest versions, it’s good.

        And last thing : when it’s fully working you will see that message in the console :
        You are using the in-browser Babel transformer. Be sure to precompile your scripts for production – https://babeljs.io/docs/setup/

        • Yes using babel to transplie your js in the browser is not recommended for performance reasons. The normal production workflow is to setup babel with a build system like gulp or grunt and use the “pre-compiled” code rather than compiling it in the browser at runtime.

%d bloggers like this: