Get To Know Babel The JavaScript Compiler Tutorial

Babel is a JavaScript transpiler. What that means is that we can take ES2015 code and make it work on all browsers, even ones that may not support it. Essentially Babel takes the ES2015 JavaScript code and compiles it into ES5 code.

This opens up all the ECMAScript 6 features to us when we code our projects. This includes features like arrows, classes, template strings, enhanced object literals, desctructuring and more. Check out my top six ES6 post I did earlier this year to get an idea on how all these new features. I also wrote something similar when I discussed TypeScript. You can check out my tutorial on that here.

For this tutorial we'll be using the Babel CLI. This is a command line tool that can be used to take existing JavaScript code and convert it from ES2015 to ES5 on the command line. This is just one of many tools you can use if you want to use Babel. If you're using Gulp or Grunt it's really easy to add Babel as a task to be run during your build process. We'll discuss that briefly below.

Setup

To get started let's install Babel on the command line. We'll assume that you already have node or iojs installed. If not check out my getting started with iojs guide.

$ npm install -g babel

Done and done!

Quick Example With Classes

Let's create a ES2015 class file and see if we can use Babel to convert it.

As you can see above it's very similar to gulp. You just choose the src and destination and it does the compilation. I haven't used this too much so I would read up on grunt if you're interested in learning more.

What's Next?

I hope this gives you a brief introduction on Babel. I want to explore a lot more build tools in the future, so expect more articles on that! Take care!