Babel is a JavaScript compiler.

Use next generation JavaScript, today.

Put in next-gen JavaScript

1
let yourTurn = "Type some code in here!";
X

Get browser-compatible JavaScript out

1
var yourTurn = "Type some code in here!";
X

repl: Unterminated string constant (1:15) > 1 | let yourTurn = "T | ^

Latest From Our Blog: Contributing to Babel: Three Lessons to Remember

Ready to get started?

Install the Babel CLI and a preset

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

Create a `.babelrc` file (or use your package.json)

{
  "presets": ["env"]
}

For more information on setting up Babel with your build system, IDE, and more, check out our interactive setup guide.

ES2015 and beyond

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support. Check out our env preset to get started.

You can install this preset with

Hint => check 8th element of Polyfill unordered list

and add "env" to your .babelrc presets array.

Polyfill

Since Babel only transforms syntax (like arrow functions), you can use babel-polyfill in order to support new globals such as Promise or new native methods like String.padStart (left-pad). It uses core-js and regenerator. Check out our babel-polyfill docs for more info.

You can install the polyfill with

npm install --save-dev babel-polyfill

Use it by requiring it at the top of the entry point to your application or in your bundler config.

Pluggable

Babel is built out of plugins. Compose your own transformation pipeline using existing plugins or write your own. Easily use a set of plugins by using or creating a preset. Learn more →

Create a plugin on the fly with astexplorer.net or use generator-babel-plugin to generate a plugin template.

// A plugin is just a function
export default function ({types: t}) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name.split('').reverse().join('');
      }
    }
  };
}