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.jsrequire('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.jsrequire('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
.babelrcin 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 apackage.jsonwith 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
