JavaScript Transpiling Start using ES6/7 with Babel


Browser support for ES6 is growing, but to be sure your code will work on environments that dont fully support it, you can use Babel, the ES6/7 to ES5 transpiler, try it out!

If you would like to use ES6/7 in your projects without having to worry about compatibility, you can use Node and Babel CLI

Quick setup of a project with Babel for ES6/7 support

  1. Download and install Node
  2. Go to a folder and create a project using your favourite command line tool
~ npm init
  1. Install Babel CLI
~ npm install --save-dev babel-cli
~ npm install --save-dev babel-preset-es2015
  1. Create a scripts folder to store your .js files, and then a dist/scripts folder where the transpiled fully compatible files will be stored.
  2. Create a .babelrc file in the root folder of your project, and write this on it
    "presets": ["es2015"]
  1. Edit your package.json file (created when you ran npm init) and add the build script to the scripts property:
    "scripts": {
    ... ,
    "build": "babel scripts --out-dir dist/scripts"
  1. Enjoy programming in ES6/7
  2. Run the following to transpile all your files to ES5
~ npm run build

For more complex projects you might want to take a look at Gulp or Webpack