Tutorial: Javascript ES6 (ES2015), get started quickly with babel v6+, Gulp, Browserify and Use Arrow Functions, Classes, Import syntax…

This post is an update to my old tutorial on how to start writing ES6 on the front end with babel.

The example on the previous post won’t work anymore because babel changed the way it works, and now requires you to download additional plugins for the languages you want to compile (i.e. JSX, ES6). The plugins needed for babel to work now are called presets.

Get Started

Download this example from my github repo to quickly get started with something that works. Follow the instructions in the repo’s “README.md” and you’re good. All you need to do is type npm start in your terminal once you have everything downloaded and it will run the example.

You can change things and they will compile because the gulp task runner is running and watching for changes to compile with babel.

Once you have the example up and running, you are free to try out any ES6 feature.

An alternative way to try out ES6 if you just want to mess around with it is to use jsfiddle. Just choose “Babel” as the language instead of the default “javascript”. The downside with jsfiddle is that you can’t really try out imports, nor can you actually build something and host it. Downloading my example as your base is a better option in the long run.

.babelrc

If you downloaded the repo you will notice there is a “.babelrc” file in the root. This file is basically a resource configuration file for babel. It can for example tell babel which presets to use. In our case, we have to use the “es2015” preset. The npm package is called “babel-preset-es2015” but don’t worry, it’s already there if you ran “npm install”.

Gulp

If you don’t know what gulp is, check out this post on task runners.

There’s a few changes to the gulp file compared to the one in my old tutorial but it basically remains the same: compile all js when there is a change and bundle it together.

The only difference from the old one is that now running “gulp” will first run the “es6” task and THEN start watching.

HTML and JS files

The rest of the files are the same as my old tutorial. The HTML file will include the bundle.js script. The script contains everything we need to run the app.

The app.js file contains the import we later use to log in to the console.

The ExampleClass.js file contains an example of an exportable ES6 class.

Where to now?

Now that you have the basis, you can start writing your awesome ES6 apps. You can check out a game of life I made in ES6, or start writing react apps. You can also check out the spread operator new to ES6, I bet you will like it!

Author: JP

Javascript jedi padawan.

  • Peter Nann

    Thanks for this. New to js classes and was looking everywhere for a simple example showing class, export, import and new all working together. Surprisingly hard to find!

    Thanks for having that here!