Babel.js , A whole new JavaScript Pt. 2

Note: Part 1 is over here.

Ok so we have this new ES6, ES2016 and ES2017 JavaScript . But how do we use it? Enter Babel.js

What is Babel.js ? Babel is a compiler that lets you use the latest JavaScript syntax without waiting for browser support. Its built using a plugin architecture which allows you to go far beyond simple JS syntax and do things like compile JSX or utilize dead code elimination.

Why should you use it? To prepare yourself for the future, increase productivity and developer happiness to name a few. Its one of the best things I have done in 2016 and I can’t image developing in pre-ES2015 JS again.

Ready to get started?

Setup

Babel CLI

The most straight forward way to use Babel is via the command line interface or CLI.

Simply install the npm package babel-cli

npm install --save-dev babel-cli

and run babel app.js -o compiled-script.js

Babel will then compile all files with a .es6.es.jsx or .js extension.

Babel Register

However a more flexible solution and the one I personally us is the babel-register hook, it works like this.

First install the npm package npm install babel-register

Then simply require the package at the entry point of your application

require('babel-register');

All subsquent files required by node with the extensions .es6.es.jsx and .js will be compiled by babel.

For instance to compile the script.js file I would add a newbabel.script.js file and require the babel-register package in it.

For example

// babel.script.js
require('babel-register');
require('script.js`);

Then simply run it like you normally would.

node babel.script.js

You can even use it to Babelify your build files, heres how you would do it with Webpack.

Add a babel.webpack.js

// babel.webpack.js
require('bable-register');
module.exports = require('webpack.config.js');

Then simply run webpack --config bable.webpack.js

The options are endless…

P.S. These are just two options, there are dozens more… https://babeljs.io/docs/setup/#installation

Configuration

Ok so we’ve setup babel to compile all our JS code… but right now it doesn’t actually do anything 🤔

Plugins to the rescue!

All babel configuration is done using the .babelrc which should be place in the root directory of you project using the JSON5 syntax.

Note: Alternatively you can define your babel config in your package.json file .

Babel will look for a .babelrc in the current directory of the file being transpiled. If one does not exist, it will travel up the directory tree until it finds either a .babelrc, or a package.json with a "babel": {} hash within.

To use a plugin all you have to do is install that plugin via npm and add it to your .babelrc configuration.

For example if you want to add ES2015 arrow functions simply install the plugin

npm install --save-dev babel-plugin-transform-es2015-arrow-functions

and add it to your .babelrc

{
"plugins": ["transform-es2015-arrow-functions"]
}

Of course, this is a bit tedious; luckily there are Babel presets.

Presets are an array of common plugins. For instance there is a react preset and a es2017 preset that includes all the compilation needed for react and es2017 syntax.

A list of common presets can be found here

You install the plugins via npm with the babel-preset- prefix

npm install --save-dev babel-preset-react

and then add it to your presets options in your .babelrc config

{
"presets": ["react"]
}

Thats its!

You are now ready to learn, experiment with and adopt all the amazing new JavaScript syntax and proposals.

In the next post I’ll outline some of favorite new JavaScript syntax!

👋 Talk to you soon,

Alex

Useful Links