### `@babel/runtime` - Added `@babel/runtime-corejs3` package and `corejs: 3` options to `@babel/plugin-transform-runtime`. - Added support of instance methods, fixes #8928. - Added flag `proposals` (in `corejs: { version: 3, proposals: true }` format) for support all proposals polyfills from `core-js`. - Used separate directories in runtime for `core-js` entry points with proposals and without. - Used `get-iterator-method` helper for getting iterators, fixes #2500. - As a cheap bonus, added support of IE8- (except some cases of `regenerator`). ### `@babel/polyfill` - Should be deprecated in favor of separate usage required features from `core-js` and `regenerator-runtime` with an informative message. ### `@babel/preset-env` - Uses for built-ins data from [`core-js-compat`](https://github.com/zloirock/core-js/tree/master/packages/core-js-compat) instead of `compat-table` since information from `compat-table` [is not enough](https://github.com/zloirock/core-js/tree/master/packages/core-js-compat). - `useBuilIns` now requires direct setting of `corejs` version option, without it will be used `2` by default and shown deprecation warning. - Added support of minor `core-js` versions for simplify updating in the future. - For preventing some order-related problems, polyfills in the both `core-js@3` plugins added on `post` stage in the order of `core-js-compat` data. - Divided plugins and polyfills parts of `preset-env`, instead of 2 internal plugins for adding polyfills, we have 6: usage and entry versions of plugins for `core-js@2`, ### Current state: `core-js@3`, `regenerator-runtime`. - Added support `samsung` target (for Samsung Internet) since `core-js-compat` and `compat-table` now contains mapping for this, fixes #6602. #### `useBuilIns: entry` with `corejs: 3` - No longer transforms `@babel/polyfill`. - Transforms **all possible** `core-js` entry points to import of related modules (based on data from [`core-js-compat`](https://unpkg.com/core-js-compat@3.0.0-beta.15/entries.json)). - Since of this, we no longer need `shippedProposals` / `proposals` flags with `useBuilIns: entry`. - Removes `regenerator-runtime/runtime` import where it's not required. #### `useBuilIns: usage` with `corejs: 3` - In addition to `shippedProposals`, added flag `proposals` (in `corejs: { version: 3, proposals: true }` format) for polyfill all proposals from `core-js`. - Fixed list of dependencies in built-in definitions. - Improved the way of determination method / built-in name and source of this method. - Adds import of required polyfills on `MemberExpression`, `ObjectPattern`, `in` operator. - Adds import of required polyfills on access to global object properties. - Adds import of all required common iterators on all syntax features which use iterators protocol (`for-of`, destructuring, spread, `yield` delegation, etc.). - Adds import of promises on syntax features which use promises (async functions/generators, dynamic import, etc.), fixes #9250, #7402, etc. ### `core-js@2` stuff I didn't want to tough `core-js@2`-related stuff, however - Fixed some serious errors in definitions which breaks `Object.getOwnPropertySymbols`, `Symbol.toStringTag` logic, `Promise#finally`, `Array#forEach`, etc. - `Array#flatMap` and trim methods moved to stable features as a part of ES2019 and loaded by deprecated `@babel/polyfill` and `@babel/preset-env` with `corejs: 2` option.
Woah, what's going on here?
A monorepo, muhahahahahaha. See the monorepo design doc for reasoning.
Core Packages
| Package | Version | Dependencies |
|---|---|---|
@babel/core |
||
@babel/parser |
||
@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:
@babel/parser - The transformer[s]: All the plugins/presets
- These all use
@babel/traverseto traverse through the AST
- These all use
- The generator:
@babel/generator
The flow goes like this:
input string -> @babel/parser 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/cliis the CLI tool that runs@babel/coreand helps with outputting to a directory, a file, stdout and more (also includes@babel/nodecli). Check out the docs.@babel/typesis used to validate, build and change AST nodes.@babel/polyfillis literally a wrapper aroundcore-jsand regenerator-runtime. Check out the docs.@babel/runtimeis 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/registeris a way to automatically compile files with Babel on the fly by binding to Node.jsrequire. Check out the docs.@babel/templateis a helper function that allows constructing AST nodes from a string presentation of the code; this eliminates the tedium of using@babel/typesfor building AST nodes.@babel/helpersis a set of pre-made@babel/templatefunctions that are used in some Babel plugins.@babel/code-frameis a standalone package used to generate errors that print the source code and point to error locations.
Presets
After Babel 6, the default transforms were removed; if you don't specify any plugins/presets, Babel 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 regular functions. A preset is 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 |
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.