Babel

[corysimmons]

---

pubDate: 2016-06-23

There are new versions of Javascript (ES6, ES7) full of new features and a ton of syntax shortcuts. For example:

() =>
  2

...is shorthand for an anonymous function that returns 2.

As with everything in programming, people can't agree on anything and browsers are slow to implement stuff. We'd have jetpacks before browsers implemented it correctly/consistently so some cool people made some things called "transpilers" that convert ES6+ to usable old-fashioned Javascript (ES5). The most popular one is Babel.

Here's what it converts the above code to.

Babel works with just about any build process, and is extendable with modular plugins.

How to use it

The easiest/cleanest way is installing some npm packages and configuring it in package.json. We'll make an npm script for it so we can run something like npm run dev from the terminal.

• cd ~/playground/babel
• echo '{}' > package.json (create a valid JSON file so we can npm install to it)
• npm i -D babel-cli babel-preset-es2015 babel-preset-stage-0 (this will install Babel's CLI, ES6 (aka: ES2015), and ES7 support)
• Add a "babel" object to package.json. Inside it we'll tell it to use the presets we installed:

"babel": {
  "presets": [
    "es2015",
    "stage-0"
  ]
}

• Create a test.js file and put it in a src folder. src (sometimes lib) is your original code. We transpile stuff from src to the sibling dist folder.

Protip: You transpile CSS (Sass, Stylus, LESS, PostCSS, etc.) and HTML (Pug/Jade, Haml, etc.) as well. Currently most companies organize this stuff as src/css, src/js, src/html, etc. but I think component architecture is a better solution for larger projects so try it out if you can.

• Now run node_modules/.bin/babel src -d dist to ensure ES6/7 files in src are being transpiled to vanilla Javascript in the dist folder.
• If you run node_modules/.bin/babel -h you'll see it has a watch flag.
• Run node_modules/.bin/babel -w src -d dist and change some stuff in src/test.js to make sure it's being transpiled on saves.
• Now... it'll suck to have to type all that crap every time so add it to the "scripts" object in package.json as "dev" then just run npm run dev (package.json scripts don't need the node_modules/.bin/ part).
• You can add/nest extra files in src and everything will work fine.

package.json should look like this (if you copy this make sure you run npm i before using it):

{
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-0": "^6.5.0"
  },
  "babel": {
    "presets": [
      "es2015",
      "stage-0"
    ]
  },
  "scripts": {
    "dev": "babel -w src -d dist"
  }
}

Congrats

Now you're able to use ES6/7. Not only that, but you're using package.json scripts to perform tasks which is pretty nice as long as a CLI for a particular tool is available (if one isn't, consider doing everyone a favor and making one).

Homework

• Learn ES6/7. It's awesome and will make your code much more elegant.
  • https://babeljs.io/docs/learn-es2015/
  • http://www.2ality.com/ (amazing tutorials)
• Learn how to use npm-run-all to watch/transpile Babel and Sass at the exact same time and consider completely replacing Gulp/Grunt with npm scripts.
  • Make Sass output source maps to dist/css/maps folder.
  • Make Sass build everything in src/css before it watches.
  • Answer Gist