babel

The compiler for writing next generation JavaScript.

Business Strategy Status Travis Status CircleCI Status Coverage Status Slack Status NPM Downloads

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.

FAQ

Docs?

Check out our website: babeljs.io

Looking for support?

For questions and support please visit our discussion forum, sign up for our Slack community, or StackOverflow.

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 (the website)?

For documentation and website issues please visit the babel/babel.github.io repo.

Want to contribute to Babel?

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

Packages

The Babel repo is managed as a monorepo; it's composed of many npm packages.

Core Packages

Package Version Dependencies
babel-core npm Dependency Status
babylon npm Dependency Status
babel-traverse npm Dependency Status
babel-generator npm Dependency Status

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
  • 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.

Other

Package Version Dependencies
babel-cli npm Dependency Status
babel-types npm Dependency Status
babel-polyfill npm Dependency Status
babel-runtime npm Dependency Status
babel-register npm Dependency Status
babel-template npm Dependency Status
babel-helpers npm Dependency Status
babel-code-frame npm Dependency Status
  • 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.
  • babel-types is used to validate, build, change AST nodes.
  • babel-polyfill is literally a wrapper around core-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 with babel-plugin-transform-runtime (usually in library/plugin code). Check out the docs.
  • babel-register is a way to automatically compile files with babel on the fly by binding to node's require. Check out the docs.
  • 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 is a set of premade babel-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.

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 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.

Package Version Dependencies Description
babel-preset-env npm Dependency Status automatically determines plugins and polyfills you need based on your supported environments

You can find community maintained presets on npm

Plugins

Plugins are the heart of Babel and what make it work.

You can find community plugins on npm.

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.

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.

Helpers

These are mostly for internal use in various plugins: babel-helper-x.

Team

Core members

Babel Daniel Tschinder Logan Smyth Henry Zhu
Babel Daniel Tschinder Logan Smyth Henry Zhu
:octocat: @babel @danez @loganfsmyth @hzoo



       img alt =babelsrc =https://raw.githubusercontent.com/babel/logo/master/babel.pngwidth =546style =max-width:100%;/>   

  用于编写下一代JavaScript的编译器。

   商业策略状态    特拉维斯状态    CircleCI状态    覆盖状态    Slack    NPM下载

Babel是一个社区驱动的工具,可帮助您编写最新版本的JavaScript。

当您支持的环境本身不支持某些功能时,它将帮助您将其编译为受支持的版本。

// ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

Out

[1, 2, 3].map(function(n) {
  return n + 1;
});

尝试在我们的 REPL 和请关注我们 @babeljs

FAQ

文件?

查看我们的网站: babeljs.io

寻找支持?

有关问题和支持,请访问我们的论坛,注册我们的 Slack社区 StackOverflow

想报告错误或请求功能?

错误和功能请求可以在 https://github.com/babel/babel/issues 上发布。< / p>

We've moved our issues from phabricator back to github issues!

以前的制版员问题网址现在会自动重定向到相应的Github问题:

https://phabricator.babeljs.io/T2168 主要对应于 https://github.com/babel/babel/issues/2168

想要报告 babeljs.io 的问题(网站)?

有关文档和网站问题,请访问 babel / babel.github.io repo。

想贡献给Babel?

查看我们的 CONTRIBUTING.md 。如果您已经加入松弛,请加入我们的 #development 渠道!

您还可以先查看帮助需要的标签。

我们的讨论/说明/路线图: babel / notes

Babel回购作为 monorepo 进行管理;它由许多npm包组成。

核心包

Package Version Dependencies
babel-core npm Dependency Status
babylon npm Dependency Status
babel-traverse npm Dependency Status
babel-generator npm Dependency Status

babel-core 是Babel编译器本身;它暴露了 babel.transform 方法,其中 convertedCode = transform(src).code

编译器可以分为3部分:

流程如下:

输入字符串 - &gt; babylon 解析器 - &gt; AST - &gt;变压器[s] - &gt; AST - &gt; babel-generator - &gt;输出字符串

查看 babel-handbook </代码> 了解更多信息。

Other

Package Version Dependencies
babel-cli npm Dependency Status
babel-types npm Dependency Status
babel-polyfill npm Dependency Status
babel-runtime npm Dependency Status
babel-register npm Dependency Status
babel-template npm Dependency Status
babel-helpers npm Dependency Status
babel-code-frame npm Dependency Status

预设

Babel 6之后,删除了默认的转换;如果您没有指定任何插件/预设,它将返回原始源代码。

Babel中使用的变压器是转换特定内容的独立代码段。例如: es2015-arrow-functions 转换具体将箭头功能转换为常规功能。预设只是一个插件数组,可以更轻松地运行一整套变换,而无需手动指定每个变换。

Package Version Dependencies Description
babel-preset-env npm Dependency Status automatically determines plugins and polyfills you need based on your supported environments

You can find community maintained presets on npm

插件

插件是Babel的核心,它使它工作。

You can find community plugins on npm.

Transform Plugins

有很多种插件:将ES6 / ES2015转换为ES5,转换为ES3,缩小,JSX,流程,实验功能等等。查看我们的网站了解更多信息

Syntax Plugins

这些只是使变换插件能够解析某些功能(变形插件已经包含语法插件,因此您不需要这两个功能): babel-plugin-syntax-x 。请查看我们的网站了解更多信息

助手

这些主要用于各种插件内部使用: babel-helper-x

团队

核心成员

Babel Daniel Tschinder Logan Smyth Henry Zhu
Babel Daniel Tschinder Logan Smyth Henry Zhu
:octocat: @babel @danez @loganfsmyth @hzoo