Babel & ES6

Babel is a JavaScript compiler. That means with Babel, you can write syntax in the latest version of JavaScript, and it will transform the code to be browser-compatible JavaScript. This is awesome, because it is good to learn the most up to date version, which often has new features that older versions don’t have. The reasons why it is important to have JavaScript compatible with versions other than the latest browser is because not everyone has updated their browser to the latest version. You can write code using the latest version of JavaScript, and let Babel take care of the rest.

Hold up! There are different versions of JavaScript?

Yes there are! If you aren’t familiar with the different versions of JavaScript Ben Mccormick has a great post explaining ‘What’s going on with JavaScript versioning.’

The version of JavaScript we are going to mess around with today is called ECMAScript 2015, which is often referred to as ES6 or ES2015.

ECMAScript was made to standardize JavaScript. You can read more about it on Wikipedia or on the maintainers site ECMA International.

To start getting familiar with Babel and ES6 open up 'Learn ES2015' on the Babel website. First, scroll down to the 'Arrow Functions' example. Then, click 'Try'.

So, now you will see the Babel Repl. Click the arrow and select 'es2015' preset to see the ES2015 version on the left, and the babel transpiled version on the right.

After you have seen Babel in action, let's see how let works. Stay in the Repl, but delete all the code on the left side. Now type:

let starWars = 'Awesome';

As you can see it compiles to:

'use strict';

var starWars = 'Awesome';

In ES6 let is the new and improved var.

Now, we have an idea of what Babel is and how it works. Let's get Babel running locally.

Open up your terminal, and make a new directory:

mkdir BabelPractice
cd BabelPractice

Babel recommends installing the CLI project by project instead of globally. So, to do that you just have to run these two simple commands:

The first command sets up a package.json file, which you need to have before you install Babel.
The second command installs Babel locally.

npm init -f -y
npm install --save-dev babel-cli

After Babel is installed open up the package.json file, and you should see something very similar to this.

{
  "name": "BabelPractice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0"
  }
}

Babel recommends adding "scripts" as a field to the package.json file. There are other ways to to run Babel, but for now we will just keep it simple. So, now replace the "test" script with a build script, which will run Babel on a javascript file that we will call 'practice.js'.

    "build": "babel practice.js -d lib"

Now, this is what your package.json file should look like.

Let's create the JavaScript file, and put our let example that we used earlier in it.

touch practice.js

let starWars = 'Awesome';

Next, run the build.

npm run build

If everything runs correctly, you will get an output similar to this:

> BabelPractice@1.0.0 build /Users/matt/Desktop/BabelPractice
> babel practice.js -d lib

practice.js -> lib/practice.js

Now you will see this command created the lib directory, but there aren't any changes to the file yet. We still need to change the configuration to get a similar output to what we saw when we used this example in the Babel REPL. Remember that we used the 'es2015' preset, so let's try setting our configuration to have the same output as the REPL with the preset 'es2015'.

First make a .babelrc file. The babelrc file is the standard place to configure the babel presets.
Next, install 'babel-present-env'.

touch .babelrc
npm install babel-preset-env --save-dev

Next, enable the preset by adding this JSON to the '.babelrc' file:

{
  "presets": ["env"]
}

The env preset lets you specify your desired environment to determine what code to emit. Look at the targets option to choose your targets - by default it will target the last two versions of each browser, and versions of Safari greater than or equal to 7.

Try running the build again.

npm run build

If you open 'practice.js' under the 'lib' directory you should see the file has been transpiled from ES6 to ES5.

If you made it this far, congratulations! You have learned:

• What Babel is.
• How Babel Works.
• What ES6 is.
• How to run Babel locally.

This post is part of the JavaScript Zero Series. The previous post in this series is Linting (Dev Environment Part 2) & Bonus: Other Fun Atom Packages!