If you’ve been developing in front-end for a while, you might have heard of ECMAScript 2015 or ES6. Both are modern updates of the Javascript language. While ECMAScript is Javascript, it does take a while for most browsers to get updated and run it. To help in this situation, developers use an awesome tool called Babel. It’s transpile ECMAScript 2015 code to normal Javascript code for our browsers, web apps, and programs to use.

Transpiling? It’s a bit like compiling where we turn our code, Java, Swift, C, etc. into binary code, 0s and 1s, which our computer runs on. But in transpiling, we are converting one language into another, but at the same level, think of Sass and CSS. As you can see, transpiling is converting our code into different versions of our code.

You should have a basic level of Javascript, ECMAScript, Gulp, and have npm installed.

The easiest way to get up and running with Babel would be your use of the Babel CLI or Command Line Interface. So let’s create a new project. I’m naming mine BabelTower after the Tower of Babel. We will download the npm package as a dev dependencies.

Fun Fact: The Tower of Babel is a myth that explains the origin of all languages known to man.

So after creating our project which should be empty, let’s npm init and npm install our Babel CLI

npm init -y
npm install babel-cli --save-dev

Now let’s create a new src folder for source, and a .babelrc file. Inside our src folder, let’s create a app.js file.

In our app.js file, let’s add some ECMAScript 2015 code just to get started. Here I added just some sample ES6 code – GOT style.

const J = 'Jon Snow';
const T = 'Tyrion Lannister';
let   D = 'Daenerys Targaryen';

var area = (x,y) => console.log(x*y);
area(2,5) // 10

var sayHi = () => console.log('Hello, World!');
sayHi() // Hello, World!

Now let’s go into our .babelrc file and add a preset which will let babel know what we want to transpile.

{
    "presets": ["es2015"]
}

So now let’s move into our package.json and under scripts, let’s create a build script

{
  "build": "babel src -d build"
}

Now let’s hop onto our terminal and run ‘npm run build’. This creates a new folder in our project called build, and inside is our new app.js file that’s been transpiled from ECMAScript 2015 into ES5 and remember – all browsers run ES5 but not all run on ECMAScript 2015.

Congrats! You have created your first transpiled ECMAScript 2015 code into proper function Javascript. If you’ve ever worked with Sass, you should never touch your build folder and instead do any modification in your src/index.js file.

Since the last release of Gulp v3.9.0, we can now transpile ECMAScript 2015 to ES5 if you’re already using a Gulp in your workflow. This is great because it has another great use of Gulp. In case you’re new to Gulp, feel free to check out my other tutorial on Gulp Basics. To get started, let’s npm install gulp-babel package to our dev dependencies.

npm install gulp-babel --save-dev

Now let’s create a gulpfile.js and for the sake of learning, let’s delete our build folder. Inside our gulp file, let’s import gulp and gulp-babel

var gulp = require('gulp');
var babel = require('gulp-babel');

After, we’ll create a new gulp task called es6 that will use the ‘babel-preset-es2015’ npm package we downloaded earlier. We can even write ECMAScript arrow functions within gulp files.

gulp.task('es6', () => gulp.src('src/app.js')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest('build'))
);

So we are getting our source file and then piping it through our babel preset es2015, then we are piping that to our new destination, a folder called build.

Now from here, we can call it finish by running

gulp es6

But if we want to set it as our default gulp task, let’s do it now.

gulp.task('default', ['es6'],() => {
    gulp.watch('src/app.js',['es6']);
});

Now let’s simply run gulp on our terminal and watch how our build folder is created and again with our ES5 javascript code that is safe to use across all browsers and devices.

Folks, that sums it up, but there are a bunch of different build tools you can use to transpile ECMAScript 2015 to ES5. Some developers use Webpack, but in my workflow I like to use alongside gulp. Doing so I can concat, minify, and transpile all my code at once.

For more information on Babel, be sure to checkout their website where they have easy-to-follow instructions, documentation and more.

Babel Website, Try It Out Editor , Getting Started and Active Babel Blog

Well, as always, hope you learned something new and saw how easy it is to use Babel and Gulp to transpile ECMAScript to ES5.

Till next time and happy coding.