This is going to be a short write-up to demonstrate how Babel can make your modern JS more portable.
So you’re probably scratching your head thinking: “Well, how will I ever write ECMAscript 2015 like this?” Enter Babel.
Babel is an open-source JSX to JS compiler. So what it does is that it takes your element-wise JSX markup and converts it to JS that’ll work on a particular browser. And what happens is you can insert your ECMAScript 2015 code inside the JSX and that will also get converted using polyfills for older browsers, and this allows you to utilize newer features that would otherwise result in a syntax error on some browsers.
Installation and Running
Babel actually consists of a collection of packages. The library itself is located under
babel-core, while the commands are contained in
babel-cli and extensions to babel start with
babel-plugin- . You usually want to install only
babel-cli and this will automatically pull
babel-core, and only install one of the
babel-plugin- packages if you need that particular functionality.
Since it is a NodeJS package, you’ll usually want to install it locally, not globally. This can be done with
npm install babel-cli. You also need to install the
babel-preset-es2015 package as well because, without it, Babel will just spit out the input files onto the console. Then you can call Babel like this:
babel src --preset es2015 --out-dir dir, where src is simply your root directory of source code, and “dir” is the folder where our files will be mirrored in but with the transpiled code, so that it’s not sent to the console.