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
// ES2015 arrow function
[1,2,3].map(n => n + 1);
Out
[1,2,3].map(function(n) {
return n + 1;
});
Try it out at our REPL and follow us at @babeljs.
Check out our website: babeljs.io
For questions and support please visit our discussion forum, sign up for our Slack community, or StackOverflow.
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 babel#2168.
Want to report an issue with babeljs.io (the website)?
For documentation and website issues please visit the babel/babel.github.io repo.
Check out our CONTRIBUTING.md. If you have already joined slack, join our #development channel!
You can also start by checking out the issues with the help-wanted label.
Our discussions/notes/roadmap: babel/notes
The Babel repo is managed as a monorepo; it's composed of many npm packages.
Package | Version | Dependencies |
---|---|---|
babel-core |
||
babylon |
||
babel-traverse |
||
babel-generator |
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
(moved to a separate repo and versioned independently) - The transformer[s]: All the plugins/presets
- These all use
babel-traverse
to traverse through the AST
- These all use
- The generator:
babel-generator
The flow goes like this:
input string -> babylon
parser -> AST
-> transformer[s] -> AST
-> babel-generator
-> output string
Check out the babel-handbook
for more information on this.
Package | Version | Dependencies |
---|---|---|
babel-cli |
||
babel-types |
||
babel-polyfill |
||
babel-runtime |
||
babel-register |
||
babel-template |
||
babel-helpers |
||
babel-code-frame |
babel-cli
is the CLI tool that runsbabel-core
and helps with outputting to a directory, a file, stdout and more (also includesbabel-node
). Check out the docs.babel-types
is used to validate, build, change AST nodes.babel-polyfill
is literally a wrapper aroundcore-js
and regenerator-runtime. Check out the docs.babel-runtime
is similar to the polyfill except that it doesn't modify the global scope and is to be used withbabel-plugin-transform-runtime
(usually in library/plugin code). Check out the docsbabel-register
is a way to automatically compile files with babel on the fly by binding to node's require. Check out the docsbabel-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 usingbabel-types
.babel-helpers
is a set of premadebabel-template
functions that are used in some babel plugins.babel-code-frame
is a standalone package used to generate errors that prints the source code and points to error locations.
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
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.
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) of the TC-39 Process for ECMAScript proposals.
You can find community maintained presets on npm
Plugins are the heart of Babel and what make it work.
You can find community plugins on npm.
There are many kinds of plugins: ones that convert ES6/ES2015 to ES5, transform to ES3, minification, JSX, flow, experimental features, and more. Check out our website for more.
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
. Check out our website for more.
These are mostly for internal use in various plugins: babel-helper-x
.
|
|
|
|
|---|---|---|---|---|
Babel | Daniel Tschinder | Logan Smyth | Henry Zhu |
:octocat: @babel | @danez | @loganfsmyth | @hzoo |
:bird: @babeljs | @TschinderDaniel | @loganfsmyth | @left_pad |
|
|
|
|
|
|---|---|---|---|---|---|---|---|---|
| Andrew Levine | Boopathi Rajaa | Brian Ng | Dan Harper | Diogo Franco |
| @drewml | @boopathi | @existentialism | @danharper | @kovensky |
| @drewml | @heisenbugger | @existentialism | @DanHarper7 | @kovnsk |
|
|
|
|
|---|---|---|---|---|---|---|---|---|
| Juriy Zaytsev | Kai Cataldo | Moti Zilberman | Sven Sauleau |
| @kangax | @kaicataldo | @motiz88 | @xtuc |
| @kangax | @kai_cataldo | @motiz88 | @svensauleau |
Amjad Masad | James Kyle | Jesse McCarthy | Sebastian McKenzie |
@amasad | @thejameskyle | @jmm | @sebmck |
@amasad | @thejameskyle | @mccjm | @kittens |