What and Why Babel?
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.
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.
Now let’s go into our .babelrc file and add a preset which will let babel know what we want to transpile.
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.
Transpiling with Gulp
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
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.
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
But if we want to set it as our default gulp task, let’s do it now.
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.
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.