217 lines
19 KiB
Markdown
217 lines
19 KiB
Markdown
<p align="center">
|
|
<a href="https://babeljs.io/">
|
|
<img alt="babel" src="https://raw.githubusercontent.com/babel/logo/master/babel.png" width="546">
|
|
</a>
|
|
</p>
|
|
|
|
<p align="center">
|
|
The compiler for writing next generation JavaScript.
|
|
</p>
|
|
|
|
<p align="center">
|
|
<a href="https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558"><img alt="Business Strategy Status" src="https://img.shields.io/badge/Business%20Model-flavortown-green.svg"></a>
|
|
<a href="https://travis-ci.org/babel/babel"><img alt="Travis Status" src="https://img.shields.io/travis/babel/babel/master.svg?label=travis&maxAge=43200"></a>
|
|
<a href="https://circleci.com/gh/babel/babel"><img alt="CircleCI Status" src="https://img.shields.io/circleci/project/github/babel/babel/master.svg?label=circle&maxAge=43200"></a>
|
|
<a href="https://codecov.io/github/babel/babel"><img alt="Coverage Status" src="https://img.shields.io/codecov/c/github/babel/babel/master.svg?maxAge=43200"></a>
|
|
<a href="https://slack.babeljs.io/"><img alt="Slack Status" src="https://slack.babeljs.io/badge.svg"></a>
|
|
<a href="https://www.npmjs.com/package/babel-core"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/babel-core.svg?maxAge=43200"></a>
|
|
</p>
|
|
|
|
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)
|
|
- [Team](#team)
|
|
- [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) |
|
|
| [`babel-preset-env`](https://github.com/babel/babel-preset-env) | [](https://www.npmjs.com/package/babel-preset-env) | [](https://david-dm.org/babel/babel-preset-env) |
|
|
|
|
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.
|
|
- a preset that can automatically determine plugins and polyfills you need based on your supported environments.
|
|
|
|
> 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. Check out our [website for more](http://babeljs.io/docs/plugins/#transform-plugins).
|
|
|
|
#### 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`. Check out our [website for more](http://babeljs.io/docs/plugins/#syntax-plugins).
|
|
|
|
### Helpers
|
|
|
|
These are mostly for internal use in various plugins: `babel-helper-x`.
|
|
|
|
## Team
|
|
|
|
### Core members
|
|
|
|
[](https://github.com/babel) | [](https://github.com/danez) | [](https://github.com/loganfsmyth) | [](https://github.com/hzoo) |
|
|
|---|---|---|---|---|
|
|
Babel | Daniel Tschinder | Logan Smyth | Henry Zhu |
|
|
:octocat: [@babel](https://github.com/babel) | [@danez](https://github.com/danez) | [@loganfsmyth](https://github.com/loganfsmyth) | [@hzoo](https://github.com/hzoo) |
|
|
:bird: [@babeljs](https://twitter.com/babeljs) | [@TschinderDaniel](https://twitter.com/TschinderDaniel) | [@loganfsmyth](https://twitter.com/loganfsmyth) | [@left_pad](https://twitter.com/left_pad) |
|
|
|
|
### Members
|
|
|
|
[](https://github.com/drewml) | [](https://github.com/boopathi) | [](https://github.com/existentialism) | [](https://github.com/danharper) | [](https://github.com/kovensky) |
|
|
|---|---|---|---|---|---|---|---|---|
|
|
| Andrew Levine | Boopathi Rajaa | Brian Ng | Dan Harper | Diogo Franco |
|
|
| [@drewml](https://github.com/drewml) | [@boopathi](https://github.com/boopathi) | [@existentialism](https://github.com/existentialism) | [@danharper](https://github.com/danharper) | [@kovensky](https://github.com/kovensky) |
|
|
| [@drewml](https://twitter.com/drewml) | [@heisenbugger](https://twitter.com/heisenbugger) | [@existentialism](https://twitter.com/existentialism) | [@DanHarper7](https://twitter.com/DanHarper7) | [@kovnsk](https://twitter.com/kovnsk) |
|
|
|
|
[](https://github.com/kangax) | [](https://github.com/kaicataldo) | [](https://github.com/motiz88) | [](https://github.com/xtuc) |
|
|
|---|---|---|---|---|---|---|---|---|
|
|
| Juriy Zaytsev | Kai Cataldo | Moti Zilberman | Sven Sauleau |
|
|
| [@kangax](https://github.com/kangax) | [@kaicataldo](https://github.com/kaicataldo) | [@motiz88](https://github.com/motiz88) | [@xtuc](https://github.com/xtuc) |
|
|
| [@kangax](https://twitter.com/kangax) | [@kai_cataldo](https://twitter.com/kai_cataldo) | [@motiz88](https://twitter.com/motiz88) | [@svensauleau](https://twitter.com/svensauleau) |
|
|
|
|
### Inactive members
|
|
|
|
[](https://github.com/amasad) | [](https://github.com/thejameskyle) | [](https://github.com/jmm) | [](https://github.com/kittens) (Creator) |
|
|
|---|---|---|---|
|
|
Amjad Masad | James Kyle | Jesse McCarthy | Sebastian McKenzie |
|
|
[@amasad](https://github.com/amasad) | [@thejameskyle](https://github.com/thejameskyle) | [@jmm](https://github.com/jmm) | [@sebmck](https://twitter.com/sebmck) |
|
|
| [@amasad](https://twitter.com/amasad) | [@thejameskyle](https://twitter.com/thejameskyle) | [@mccjm](https://twitter.com/mccjm) | [@kittens](https://github.com/kittens)
|
|
|
|
## License
|
|
|
|
[MIT](https://github.com/babel/babel/blob/master/LICENSE)
|