Hi! If you are like me, you are tired of writing the same old ES5 JS code in your Node.js applications.
If yes, you can use the newer features of JavaScript ES2015 and ES2016 standards in your Node.js applications today. ES2015 and ES2016 make the JavaScript development a cool breeze but hey, not every ES2015 feature is supported in our beloved Node.js.
This is where Babel comes to the rescue. Babel is a transpiler for JavaScript that transpiles your ES2015 and ES2016 code into ES5 and even ES3 code. In simple words, it converts your code into JavaScript that Node.js can run and make you really happy.
Small note: Node.js already supports several ES2015 features, so if you don't want to transpile ES2015 code you may run Node.js with the --harmony
flag to enable a few more (staged) features. In order to access more harmony flags for experimental features run this command: node --v8-options | grep harmony
. However, note that not all features are supported even in the latest Node.js (version 5 at the time of writing), and the flagged features are often unstable or incomplete. So keep reading to make use of more ES2015 and ES2016 features, without requiring flags.
Some assumptions made
There are some assumptions I am making about you! YES YOU!
- You know your way around Node.js.
- You can install packages using npm.
- You have Node.js and npm already installed.
- You are okay with using some CLI occasionally.
- It's good to know some ES2015 beforehand, but not required.
Following along the code
Type of person who follows code instead of just reading? Code is available here in this repo.
Installing and getting started with Babel
There are many ways you can set up Babel. Here we will be discussing enough to get up and running using babel-cli.
Let's create a simple index.js
in a code
directory which will contain the following ES2015 code:
function* jsRocksIsAwesome() {
yield "JS Rocks is Awesome";
yield "JS Rocks says JavaScript Rocks";
return "because JavaScript really rocks";
}
var jsRocks = jsRocksIsAwesome();
console.log(jsRocks.next());
console.log(jsRocks.next());
console.log(jsRocks.next());
We'll install the babel-cli package with the next command. This will install the latest stable version of babel-cli for the current project and list it as one of the devDependencies
in package.json
too:
npm install --save-dev babel-cli
Now if you run:
babel code/index.js -d build/
You will see the same code that you wrote appear in build/index.js
. This is where Babel's plugins and presets come.
Plugins and Presets
Babel doesn't do much on its own, but with plugins and presets it can do a lot. We want all the ES2016 and ES2015 goodness in our code.
In order to do that we'll install two presets as part of our devDependencies
:
Run the following command to install these presets:
npm install --save-dev babel-preset-es2015 babel-preset-stage-0
Babel has a wide range of plugins that you can access here.
Now you need to include these presets in the command you issue:
babel --presets es2015,stage-0 code/index.js -o build/app.js
You will see normal ES5 code generated in app.js
, this is called Transpiled code (a term used widely in the JS world). You can run this code using the command below.
node build/app.js
Setting up a proper build environment using Babel
This is all good magic, but what about doing some proper development using Node.js?
babel configuration file .babelrc
.babelrc
is a very neat way to separate all your Babel stuff in one JSON file. It's also pretty easy to get started. This is our .babelrc
file for this tutorial:
{
"plugins": ["es2015", "stage-0"]
}
You can configure other .babelrc
options and make it as robust as you want it to be.
This is pretty much it of Babel configuration for this tutorial. Now whenever we want to add or remove plugins, instead of changing the command we will change the plugins array in this file. Easy! Isn't it?
Now if you run:
babel -w code/ -d build/
It will read the presets to use from .babelrc
compile the code in code/
directory and generate the compiled JavaScript files in the build/
folder, but hey! The command isn't over yet. Note the -w
flag: it stands for watch and will recompile the code as you make changes in your code
directory. COOL! Now this is some magic I am talking about.
Using source maps in your file
If you are thinking that's all cool and fun but what about some actual code debugging. You don't have to be worried. Source maps are just for this purpose. Source maps tell Node.js that this code is transpiled and point to errors in the actual source file instead of the transpiled file!
This code/error.js
file here throws an error after the second yield
in the generator but the transpiled code looks quite different.
function* errorFulGenerator() {
yield "yo";
throw new Error("source maps are awesome");
return "";
}
var errorGen = errorFulGenerator();
errorGen.next();
errorGen.next();
We use this command to generate source maps along with the transpiled code. Note the --source-maps
flag:
babel code/ -d build/ --source-maps
Now when we encounter the error we get useful debugging such as this:
errorGen.next()
^
Error: source maps are awesome
at errorFulGenerator (/home/programreneur/Programming/githubRepos/babeljs-short-tutorial/code/error.js:3:9)
at next (native)
at Object.<anonymous> (/home/programreneur/Programming/githubRepos/babeljs-short-tutorial/code/error.js:10:10)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Function.Module.runMain (module.js:457:10)
at startup (node.js:138:18)
at node.js:974:3
So this is how you'll use source maps.
Setting up npm command
In order to simplify the build process even more, you can update your package.json
file to include a build script for Babel. In the package.json
's scripts
object you can add a build script such as the one below:
"scripts": {
"build": "babel -w code/ -d build -s"
}
Now, we can run:
npm run build
And get all the ES2015/ES2016 goodness instantly today. :)
Learn more about Babel
This is a basic tutorial on Babel but the Babel world just starts here. It's surrounded by a wonderful community and is used by big names in IT world. Babel has support for all the major build tools too such as Grunt and gulp. You can check them all out in the Babel Website.
These are some of the resources that can even up your game further in the Babel world:
- Learn ES2015 and Babel using this detailed tutorial
- Read the Babel docs on setting up Babel (They're helpful)
Source code and Contributions and Thank yous
Source code for this tutorial is available in this repo.
If you find some typo or would like to make some update, please do so using the power of issues and PR in our GitHub Repo.
I would also like to thank Fabrício Matté for approving this article to be posted on JS Rocks and the corrections he made.
Comments