The compiler for writing next generation JavaScript.
Babel is a community-driven tool that helps you write the latest version of JavaScript.
When your supported environments don't support certain features natively, it will help you compile it down to a supported version.
**In**
```js
// ES2015 arrow function
[1,2,3].map(n => n + 1);
```
**Out**
```js
[1,2,3].map(function(n) {
return n + 1;
});
```
Try it out at our [REPL](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=latest&code=%5B1%2C2%2C3%5D.map(n%20%3D%3E%20n%20%2B%201)%3B&experimental=true&loose=true&spec=false&playground=false&stage=0) and follow us at [@babeljs](https://twitter.com/babeljs).
- [FAQ](#faq)
- [Packages](#packages)
- [Core Packages](#core-packages)
- [Other](#other)
- [Presets](#presets)
- [Plugins](#plugins)
- [Transform Plugins](#transform-plugins)
- [Syntax Plugins](#syntax-plugins)
- [Misc Packages](#misc-packages)
- [License](#license)
# FAQ
## Docs?
Check out our website: [babeljs.io](http://babeljs.io/)
## Looking for support?
For questions and support please visit our [discussion forum](https://discuss.babeljs.io/), sign up for our [Slack community](https://slack.babeljs.io/), or [StackOverflow](http://stackoverflow.com/questions/tagged/babeljs).
## Want to report a bug or request a feature?
Bugs and feature requests can be posted at https://github.com/babel/babel/issues.
> We've moved our issues from phabricator back to github issues!
Former phabricator issue urls now automatically redirect to their corresponding Github issue:
https://phabricator.babeljs.io/T2168 mostly corresponds to https://github.com/babel/babel/issues/2168.
## Want to report an issue with [babeljs.io](https://babeljs.io) (the website)?
For documentation and website issues please visit the [babel/babel.github.io](https://github.com/babel/babel.github.io)repo.
## Want to contribute to Babel?
Check out our [CONTRIBUTING.md](https://github.com/babel/babel/blob/master/CONTRIBUTING.md). If you have already joined slack, join our [#development](https://babeljs.slack.com/messages/development) channel!
You can also start by checking out the issues with the [help-wanted](https://github.com/babel/babel/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) label.
Our discussions/notes/roadmap: [babel/notes](https://github.com/babel/notes)
## Packages
The Babel repo is managed as a [monorepo](https://github.com/babel/babel/blob/master/doc/design/monorepo.md); it's composed of many npm packages.
### Core Packages
| Package | Version | Dependencies |
|--------|-------|------------|
| [`babel-core`](/packages/babel-core) | [](https://www.npmjs.com/package/babel-core) | [](https://david-dm.org/babel/babel?path=packages/babel-core) |
| [`babylon`](https://github.com/babel/babylon) | [](https://www.npmjs.com/package/babylon) | [](https://david-dm.org/babel/babylon) |
| [`babel-traverse`](/packages/babel-traverse) | [](https://www.npmjs.com/package/babel-traverse) | [](https://david-dm.org/babel/babel?path=packages/babel-traverse) |
| [`babel-generator`](/packages/babel-generator) | [](https://www.npmjs.com/package/babel-generator) | [](https://david-dm.org/babel/babel?path=packages/babel-generator) |
[`babel-core`](/packages/babel-core) is the Babel compiler itself; it exposes the `babel.transform` method, where `transformedCode = transform(src).code`.
The compiler can be broken down into 3 parts:
- The parser: [`babylon`](https://github.com/babel/babylon) (moved to a separate repo and versioned independently)
- The transformer[s]: All the plugins/presets
- These all use [`babel-traverse`](/packages/babel-traverse) to traverse through the AST
- The generator: [`babel-generator`](/packages/babel-generator)
The flow goes like this:
input string -> `babylon` parser -> `AST` -> transformer[s] -> `AST` -> `babel-generator` -> output string
Check out the [`babel-handbook`](https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/plugin-handbook.md#introduction) for more information on this.
#### Other
| Package | Version | Dependencies |
|--------|-------|------------|
| [`babel-cli`](/packages/babel-cli) | [](https://www.npmjs.com/package/babel-cli) | [](https://david-dm.org/babel/babel?path=packages/babel-cli) |
| [`babel-types`](/packages/babel-types) | [](https://www.npmjs.com/package/babel-types) | [](https://david-dm.org/babel/babel?path=packages/babel-types) |
| [`babel-polyfill`](/packages/babel-polyfill) | [](https://www.npmjs.com/package/babel-polyfill) | [](https://david-dm.org/babel/babel?path=packages/babel-polyfill) |
| [`babel-runtime`](/packages/babel-runtime) | [](https://www.npmjs.com/package/babel-runtime) | [](https://david-dm.org/babel/babel?path=packages/babel-runtime) |
| [`babel-register`](/packages/babel-register) | [](https://www.npmjs.com/package/babel-register) | [](https://david-dm.org/babel/babel?path=packages/babel-register) |
| [`babel-template`](/packages/babel-template) | [](https://www.npmjs.com/package/babel-template) | [](https://david-dm.org/babel/babel?path=packages/babel-template) |
| [`babel-helpers`](/packages/babel-helpers) | [](https://www.npmjs.com/package/babel-helpers) | [](https://david-dm.org/babel/babel?path=packages/babel-helpers) |
| [`babel-code-frame`](/packages/babel-code-frame) | [](https://www.npmjs.com/package/babel-code-frame) | [](https://david-dm.org/babel/babel?path=packages/babel-code-frame) |
- [`babel-cli`](/packages/babel-cli) is the CLI tool that runs `babel-core` and helps with outputting to a directory, a file, stdout and more (also includes `babel-node`). Check out the [docs](https://babeljs.io/docs/usage/cli/).
- [`babel-types`](/packages/babel-types) is used to validate, build, change AST nodes.
- [`babel-polyfill`](/packages/babel-polyfill) is [literally a wrapper](https://github.com/babel/babel/blob/master/packages/babel-polyfill/src/index.js) around [`core-js`](https://github.com/zloirock/core-js) and [regenerator-runtime](https://github.com/facebook/regenerator/tree/master/packages/regenerator-runtime). Check out the [docs](https://babeljs.io/docs/usage/polyfill/).
- [`babel-runtime`](/packages/babel-runtime) is similar to the polyfill except that it doesn't modify the global scope and is to be used with [`babel-plugin-transform-runtime`](/packages/babel-plugin-transform-runtime) (usually in library/plugin code). Check out the [docs](https://babeljs.io/docs/plugins/transform-runtime/)
- [`babel-register`](/packages/babel-register) is a way to automatically compile files with babel on the fly by binding to node's require. Check out the [docs](http://babeljs.io/docs/usage/require/)
- [`babel-template`](/packages/babel-template) is a helper function to make AST nodes. Instead you can pass a string representing the code you want to create rather than tediously building them using `babel-types`.
- [`babel-helpers`](/packages/babel-helpers) is a set of premade `babel-template` functions that are used in some babel plugins.
- [`babel-code-frame`](/packages/babel-code-frame) is a standalone package used to generate errors that prints the source code and points to error locations.
### [Presets](http://babeljs.io/docs/plugins/#presets)
After Babel 6, the default transforms were removed; if you don't specify any plugins/presets it will just return the original source code.
The transformer[s] used in Babel are the independent pieces of code that transform specific things. For example: the [`es2015-arrow-functions`](/packages/babel-plugin-transform-es2015-arrow-functions) transform specifically changes arrow functions into a regular function. Presets are just simply an array of plugins that make it easier to run a whole a set of transforms without specifying each one manually.
There are a few presets that we maintain officially.
| Package | Version | Dependencies |
|--------|-------|------------|
| [`babel-preset-es2015`](/packages/babel-preset-es2015) | [](https://www.npmjs.com/package/babel-preset-es2015) | [](https://david-dm.org/babel/babel?path=packages/babel-preset-es2015) |
| [`babel-preset-es2016`](/packages/babel-preset-es2016) | [](https://www.npmjs.com/package/babel-preset-es2016) | [](https://david-dm.org/babel/babel?path=packages/babel-preset-es2016) |
| [`babel-preset-es2017`](/packages/babel-preset-es2017) | [](https://www.npmjs.com/package/babel-preset-es2017) | [](https://david-dm.org/babel/babel?path=packages/babel-preset-es2017) |
| [`babel-preset-latest`](/packages/babel-preset-latest) | [](https://www.npmjs.com/package/babel-preset-latest) | [](https://david-dm.org/babel/babel?path=packages/babel-preset-latest) |
| [`babel-preset-stage-0`](/packages/babel-preset-stage-0) | [](https://www.npmjs.com/package/babel-preset-stage-0) | [](https://david-dm.org/babel/babel?path=packages/babel-preset-stage-0) |
| [`babel-preset-stage-1`](/packages/babel-preset-stage-1) | [](https://www.npmjs.com/package/babel-preset-stage-1) | [](https://david-dm.org/babel/babel?path=packages/babel-preset-stage-1) |
| [`babel-preset-stage-2`](/packages/babel-preset-stage-2) | [](https://www.npmjs.com/package/babel-preset-stage-2) | [](https://david-dm.org/babel/babel?path=packages/babel-preset-stage-2) |
| [`babel-preset-stage-3`](/packages/babel-preset-stage-3) | [](https://www.npmjs.com/package/babel-preset-stage-3) | [](https://david-dm.org/babel/babel?path=packages/babel-preset-stage-3) |
| [`babel-preset-react`](/packages/babel-preset-react) | [](https://www.npmjs.com/package/babel-preset-react) | [](https://david-dm.org/babel/babel?path=packages/babel-preset-react) |
We maintain:
- a preset for each yearly release of ECMAScript (Javascript) starting from ES6/ES2015
- a preset for react (JSX/Flow)
- a preset for each [stage (0-3)](http://babeljs.io/docs/plugins/#stage-x-experimental-presets) of the [TC-39 Process](https://tc39.github.io/process-document/) for ECMAScript proposals.
> You can find community maintained presets on [npm](https://www.npmjs.com/search?q=babel-preset)
### [Plugins](http://babeljs.io/docs/plugins)
Plugins are the heart of Babel and what make it work.
> You can find community plugins on [npm](https://www.npmjs.com/search?q=babel-plugin).
#### Transform Plugins
There are many kinds of plugins: ones that convert ES6/ES2015 to ES5, transform to ES3, minification, JSX, flow, experimental features, and more.
| Package | Version | External Deps |
|--------|-------|------------|
| [`babel-plugin-check-es2015-constants`](/packages/babel-plugin-check-es2015-constants) | [](https://www.npmjs.com/package/babel-plugin-check-es2015-constants) | |
| [`babel-plugin-transform-async-functions`](/packages/babel-plugin-transform-async-functions) | [](https://www.npmjs.com/package/babel-plugin-transform-async-functions) | |
| [`babel-plugin-transform-async-generator-functions`](/packages/babel-plugin-transform-async-generator-functions) | [](https://www.npmjs.com/package/babel-plugin-transform-async-generator-functions) |
| [`babel-plugin-transform-async-to-generator`](/packages/babel-plugin-transform-async-to-generator) | [](https://www.npmjs.com/package/babel-plugin-transform-async-to-generator) | |
| [`babel-plugin-transform-async-to-module-method`](/packages/babel-plugin-transform-async-to-module-method) | [](https://www.npmjs.com/package/babel-plugin-transform-async-to-module-method) | |
| [`babel-plugin-transform-class-properties`](/packages/babel-plugin-transform-class-properties) | [](https://www.npmjs.com/package/babel-plugin-transform-class-properties) | |
| [`babel-plugin-transform-decorators`](/packages/babel-plugin-transform-decorators) | [](https://www.npmjs.com/package/babel-plugin-transform-decorators) | |
| [`babel-plugin-transform-do-expressions`](/packages/babel-plugin-transform-do-expressions) | [](https://www.npmjs.com/package/babel-plugin-transform-do-expressions) | |
| [`babel-plugin-transform-es2015-arrow-functions`](/packages/babel-plugin-transform-es2015-arrow-functions) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-arrow-functions) | |
| [`babel-plugin-transform-es2015-block-scoped-functions`](/packages/babel-plugin-transform-es2015-block-scoped-functions) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-block-scoped-functions) | |
| [`babel-plugin-transform-es2015-block-scoping`](/packages/babel-plugin-transform-es2015-block-scoping) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-block-scoping) | [](https://david-dm.org/babel/babel?path=packages/babel-plugin-transform-es2015-block-scoping) |
| [`babel-plugin-transform-es2015-classes`](/packages/babel-plugin-transform-es2015-classes) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-classes) | |
| [`babel-plugin-transform-es2015-computed-properties`](/packages/babel-plugin-transform-es2015-computed-properties) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-computed-properties) | |
| [`babel-plugin-transform-es2015-destructuring`](/packages/babel-plugin-transform-es2015-destructuring) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-destructuring) | |
| [`babel-plugin-transform-es2015-duplicate-keys`](/packages/babel-plugin-transform-es2015-duplicate-keys) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-duplicate-keys) | |
| [`babel-plugin-transform-es2015-for-of`](/packages/babel-plugin-transform-es2015-for-of) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-for-of) | |
| [`babel-plugin-transform-es2015-function-name`](/packages/babel-plugin-transform-es2015-function-name) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-function-name) | |
| [`babel-plugin-transform-es2015-instanceof`](/packages/babel-plugin-transform-es2015-instanceof) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-instanceof) | |
| [`babel-plugin-transform-es2015-literals`](/packages/babel-plugin-transform-es2015-literals) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-literals) | |
| [`babel-plugin-transform-es2015-modules-amd`](/packages/babel-plugin-transform-es2015-modules-amd) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-amd) | |
| [`babel-plugin-transform-es2015-modules-commonjs`](/packages/babel-plugin-transform-es2015-modules-commonjs) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-commonjs) | |
| [`babel-plugin-transform-es2015-modules-systemjs`](/packages/babel-plugin-transform-es2015-modules-systemjs) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-systemjs) | |
| [`babel-plugin-transform-es2015-modules-umd`](/packages/babel-plugin-transform-es2015-modules-umd) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-umd) | |
| [`babel-plugin-transform-es2015-object-super`](/packages/babel-plugin-transform-es2015-object-super) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-object-super) | |
| [`babel-plugin-transform-es2015-parameters`](/packages/babel-plugin-transform-es2015-parameters) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-parameters) | |
| [`babel-plugin-transform-es2015-shorthand-properties`](/packages/babel-plugin-transform-es2015-shorthand-properties) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-shorthand-properties) | |
| [`babel-plugin-transform-es2015-spread`](/packages/babel-plugin-transform-es2015-spread) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-spread) | |
| [`babel-plugin-transform-es2015-sticky-regex`](/packages/babel-plugin-transform-es2015-sticky-regex) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-sticky-regex) | |
| [`babel-plugin-transform-es2015-template-literals`](/packages/babel-plugin-transform-es2015-template-literals) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-template-literals) | |
| [`babel-plugin-transform-es2015-typeof-symbol`](/packages/babel-plugin-transform-es2015-typeof-symbol) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-typeof-symbol) | |
| [`babel-plugin-transform-es2015-unicode-regex`](/packages/babel-plugin-transform-es2015-unicode-regex) | [](https://www.npmjs.com/package/babel-plugin-transform-es2015-unicode-regex) | [](https://david-dm.org/babel/babel?path=packages/babel-plugin-transform-es2015-unicode-regex) |
| [`babel-plugin-transform-es3-member-expression-literals`](/packages/babel-plugin-transform-es3-member-expression-literals) | [](https://www.npmjs.com/package/babel-plugin-transform-es3-member-expression-literals) | |
| [`babel-plugin-transform-es3-property-literals`](/packages/babel-plugin-transform-es3-property-literals) | [](https://www.npmjs.com/package/babel-plugin-transform-es3-property-literals) | |
| [`babel-plugin-transform-es5-property-mutators`](/packages/babel-plugin-transform-es5-property-mutators) | [](https://www.npmjs.com/package/babel-plugin-transform-es5-property-mutators) | |
| [`babel-plugin-transform-eval`](/packages/babel-plugin-transform-eval) | [](https://www.npmjs.com/package/babel-plugin-transform-eval) | |
| [`babel-plugin-transform-exponentiation-operator`](/packages/babel-plugin-transform-exponentiation-operator) | [](https://www.npmjs.com/package/babel-plugin-transform-exponentiation-operator) | |
| [`babel-plugin-transform-export-extensions`](/packages/babel-plugin-transform-export-extensions) | [](https://www.npmjs.com/package/babel-plugin-transform-export-extensions) | |
| [`babel-plugin-transform-flow-comments`](/packages/babel-plugin-transform-flow-comments) | [](https://www.npmjs.com/package/babel-plugin-transform-flow-comments) | |
| [`babel-plugin-transform-flow-strip-types`](/packages/babel-plugin-transform-flow-strip-types) | [](https://www.npmjs.com/package/babel-plugin-transform-flow-strip-types) | |
| [`babel-plugin-transform-function-bind`](/packages/babel-plugin-transform-function-bind) | [](https://www.npmjs.com/package/babel-plugin-transform-function-bind) | |
| [`babel-plugin-transform-jscript`](/packages/babel-plugin-transform-jscript) | [](https://www.npmjs.com/package/babel-plugin-transform-jscript) | |
| [`babel-plugin-transform-object-assign`](/packages/babel-plugin-transform-object-assign) | [](https://www.npmjs.com/package/babel-plugin-transform-object-assign) | |
| [`babel-plugin-transform-object-rest-spread`](/packages/babel-plugin-transform-object-rest-spread) | [](https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread) | |
| [`babel-plugin-transform-object-set-prototype-of-to-assign`](/packages/babel-plugin-transform-object-set-prototype-of-to-assign) | [](https://www.npmjs.com/package/babel-plugin-transform-object-set-prototype-of-to-assign) | |
| [`babel-plugin-transform-proto-to-assign`](/packages/babel-plugin-transform-proto-to-assign) | [](https://www.npmjs.com/package/babel-plugin-transform-proto-to-assign) | [](https://david-dm.org/babel/babel?path=packages/babel-plugin-transform-proto-to-assign) |
| [`babel-plugin-transform-react-constant-elements`](/packages/babel-plugin-transform-react-constant-elements) | [](https://www.npmjs.com/package/babel-plugin-transform-react-constant-elements) | |
| [`babel-plugin-transform-react-display-name`](/packages/babel-plugin-transform-react-display-name) | [](https://www.npmjs.com/package/babel-plugin-transform-react-display-name) | |
| [`babel-plugin-transform-react-inline-elements`](/packages/babel-plugin-transform-react-inline-elements) | [](https://www.npmjs.com/package/babel-plugin-transform-react-inline-elements) | |
| [`babel-plugin-transform-react-jsx`](/packages/babel-plugin-transform-react-jsx) | [](https://www.npmjs.com/package/babel-plugin-transform-react-jsx) | |
| [`babel-plugin-transform-react-jsx-compat`](/packages/babel-plugin-transform-react-jsx-compat) | [](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-compat) | |
| [`babel-plugin-transform-react-jsx-self`](/packages/babel-plugin-transform-react-jsx-self) | [](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-self) | |
| [`babel-plugin-transform-react-jsx-source`](/packages/babel-plugin-transform-react-jsx-source) | [](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) | |
| [`babel-plugin-transform-regenerator`](/packages/babel-plugin-transform-regenerator) | [](https://www.npmjs.com/package/babel-plugin-transform-regenerator) | [](https://david-dm.org/babel/babel?path=packages/babel-plugin-transform-regenerator) |
| [`babel-plugin-transform-runtime`](/packages/babel-plugin-transform-runtime) | [](https://www.npmjs.com/package/babel-plugin-transform-runtime) | |
| [`babel-plugin-transform-strict-mode`](/packages/babel-plugin-transform-strict-mode) | [](https://www.npmjs.com/package/babel-plugin-transform-strict-mode) | |
#### Syntax Plugins
These just enable the transform plugins to be able to parse certain features (the transform plugins already include the syntax plugins so you don't need both): `babel-plugin-syntax-x`.
### Helpers
These are mostly for internal use in various plugins: `babel-helper-x`.
### Misc Packages
- [`babel`](/packages/babel) the deprecated `babel` package on npm that was used in Babel 5.
- [`babel-messages`](/packages/babel-messages) a package to keep error messages, etc (not always used)
## License
[MIT](https://github.com/babel/babel/blob/master/LICENSE)