Getting started with babel

readme.md

Quick how-to

• If you don't already have a package.json, make one (npm init or just echo {} > package.json)

• npm install --save-dev babel-cli babel-preset-env

• Create .babelrc with your targets:

  {
    "presets": [
      ["env", {
        "targets": {
          "node": "6.10"
        },
        "useBuiltIns": true
      }]
    ]
  }
  

• Edit your package.json to define a build script - change paths as appropriate

  {
    "dependencies": {},
    "devDependencies": {
      "babel-cli": "^6.26.0",
      "babel-preset-env": "^1.6.1"
    },
    "scripts": {
      "build": "babel src -d dist"
    },
  }
  

• Run npm run build to transpile everything in src/ and save output in dist/

Tips

• Run node_modules/.bin/babel --help to see more options (including minifying output, creating source-maps, etc) and adjust your "build" command accordingly

• To combine all files in src into a single file, change your build script to something like babel src -o dist/index.js

• If you have other steps in your build, you can add more npm scripts and then change your "build" script to call other scripts, or use a build system, task runner or module bundler like Brunch, Gulp, or Webpack.

• Get babel-preset-env to report what it's doing by adding "debug": true to .babelrc:

  {
    "presets": [
      ["env", {
        "targets": {
          "node": "6.10"
        },
        "useBuiltIns": true,
        "debug": true
      }]
    ]
  }