Medium/babel

Name: babel

Owner: Medium

Description: :tropical_fish: Babel is a compiler for writing next generation JavaScript.

Forked from: babel/babel

Created: 2016-07-26 16:42:26.0

Updated: 2017-11-26 18:20:03.0

Pushed: 2016-07-26 16:51:12.0

Homepage: https://babeljs.io/

Size: 14339

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

The compiler for writing next generation JavaScript.

Docs?

Check out our website: http://babeljs.io/

Looking for support?

For questions and support please visit the discussion forum, Slack community, or StackOverflow.

Want to report a bug or request a feature?

We are in the process of moving our issues from phabricator back to github issues! Check out https://github.com/babel/phabricator-to-github for more info

Bugs and feature requests should be posted at phabricator.babeljs.io.

You can directly translate a github issue to phabricator; just add a T to the beginning of the issue.

s://phabricator.babeljs.io/T2168
esponds to
s://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.github.io repo.

Want to contribute to Babel?

Check out our CONTRIBUTING.md. If you have already joined slack, join our #development channel!

Packages

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

Core 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 seperate repo and versioned independently)
• The transformer[s]: All the plugins/presets
• These all use babel-traverse to traverse through the AST
• 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 | | | | babel-types | | | | babel-polyfill | | | | babel-runtime | | | | babel-register | | | | babel-template | | | | babel-helpers | | | | babel-code-frame | | |

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

There are a few presets that we maintain officially.

| Package | Version | Dependencies | |——–|——-|————| | babel-preset-es2015 | | | | babel-preset-es2016 | | | | babel-preset-stage-0 | | | | babel-preset-stage-1 | | | | babel-preset-stage-2 | | | | babel-preset-stage-3 | | | | 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) of the TC-39 Process for ECMAScript proposals.

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.

| Package | Version | External Deps | |——–|——-|————| | babel-plugin-check-es2015-constants | | | | babel-plugin-transform-async-functions | | | | babel-plugin-transform-async-to-generator | | | | babel-plugin-transform-async-to-module-method | | | | babel-plugin-transform-class-constructor-call | | | | babel-plugin-transform-class-properties | | | | babel-plugin-transform-decorators | | | | babel-plugin-transform-do-expressions | | | | babel-plugin-transform-es2015-arrow-functions | | | | babel-plugin-transform-es2015-block-scoped-functions | | | | babel-plugin-transform-es2015-block-scoping | | | | babel-plugin-transform-es2015-classes | | | | babel-plugin-transform-es2015-computed-properties | | | | babel-plugin-transform-es2015-destructuring | | | | babel-plugin-transform-es2015-duplicate-keys | | | | babel-plugin-transform-es2015-for-of | | | | babel-plugin-transform-es2015-function-name | | | | babel-plugin-transform-es2015-instanceof | | | | babel-plugin-transform-es2015-literals | | | | babel-plugin-transform-es2015-modules-amd | | | | babel-plugin-transform-es2015-modules-commonjs | | | | babel-plugin-transform-es2015-modules-systemjs | | | | babel-plugin-transform-es2015-modules-umd | | | | babel-plugin-transform-es2015-object-super | | | | babel-plugin-transform-es2015-parameters | | | | babel-plugin-transform-es2015-shorthand-properties | | | | babel-plugin-transform-es2015-spread | | | | babel-plugin-transform-es2015-sticky-regex | | | | babel-plugin-transform-es2015-template-literals | | | | babel-plugin-transform-es2015-typeof-symbol | | | | babel-plugin-transform-es2015-unicode-regex | | | | babel-plugin-transform-es3-member-expression-literals | | | | babel-plugin-transform-es3-property-literals | | | | babel-plugin-transform-es5-property-mutators | | | | babel-plugin-transform-eval | | | | babel-plugin-transform-exponentiation-operator | | | | babel-plugin-transform-export-extensions | | | | babel-plugin-transform-flow-comments | | | | babel-plugin-transform-flow-strip-types | | | | babel-plugin-transform-function-bind | | | | babel-plugin-transform-inline-environment-variables | | | | babel-plugin-transform-jscript | | | | babel-plugin-transform-member-expression-literals | | | | babel-plugin-transform-merge-sibling-variables | | | | babel-plugin-transform-minify-booleans | | | | babel-plugin-transform-node-env-inline | | | | babel-plugin-transform-object-assign | | | | babel-plugin-transform-object-rest-spread | | | | babel-plugin-transform-object-set-prototype-of-to-assign | | | | babel-plugin-transform-property-literals | | | | babel-plugin-transform-proto-to-assign | | | | babel-plugin-transform-react-constant-elements | | | | babel-plugin-transform-react-display-name | | | | babel-plugin-transform-react-inline-elements | | | | babel-plugin-transform-react-jsx | | | | babel-plugin-transform-react-jsx-compat | | | | babel-plugin-transform-react-jsx-self | | | | babel-plugin-transform-react-jsx-source | | | | babel-plugin-transform-regenerator | | | | babel-plugin-transform-remove-console | | | | babel-plugin-transform-remove-debugger | | | | babel-plugin-transform-runtime | | | | babel-plugin-transform-simplify-comparison-operators | | | | babel-plugin-transform-strict-mode | | | | babel-plugin-transform-undefined-to-void | | |

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

| Package | Version | |——–|——-| | babel-plugin-syntax-async-functions | | | babel-plugin-syntax-async-generators | | | babel-plugin-syntax-class-constructor-call | | | babel-plugin-syntax-class-properties | | | babel-plugin-syntax-decorators | | | babel-plugin-syntax-do-expressions | | | babel-plugin-syntax-exponentiation-operator | | | babel-plugin-syntax-export-extensions | | | babel-plugin-syntax-flow | | | babel-plugin-syntax-function-bind | | | babel-plugin-syntax-function-sent | | | babel-plugin-syntax-jsx | | | babel-plugin-syntax-object-rest-spread | |

Helpers

These are mostly for internal use in plugins.

| Package | Version | External Deps | |——–|——-|————| | babel-helper-bindify-decorators | | | | babel-helper-builder-binary-assignment-operator-visitor | | | | babel-helper-builder-conditional-assignment-operator-visitor | | | | babel-helper-builder-react-jsx | | | | babel-helper-call-delegate | | | | babel-helper-define-map | | | | babel-helper-explode-assignable-expression | | | | babel-helper-explode-class | | | | babel-helper-fixtures | | | | babel-helper-function-name | | | | babel-helper-get-function-arity | | | | babel-helper-hoist-variables | | | | babel-helper-optimise-call-expression | | | | babel-helper-plugin-test-runner | | | | babel-helper-regex | | | | babel-helper-remap-async-to-generator | | | | babel-helper-replace-supers | | | | babel-helper-transform-fixture-test-runner | | |

Misc

• babel the deprecated babel package on npm that was used in Babel 5.
• babel-messages a package to keep error messages, etc (not always used)

License

MIT