Refactor move docs (#8108)

* feat: [skip] generate readme script

* docs: [skip ci] update READMEs

* docs: [skip ci] fix code block type

* chore: [skip ci] move generator script
This commit is contained in:
Sven SAULEAU 2018-06-04 16:32:39 +02:00 committed by Henry Zhu
parent b6eaaa2496
commit b445b79734
143 changed files with 1286 additions and 11238 deletions

View File

@ -2,20 +2,18 @@
> Babel command line.
In addition, various entry point scripts live in the top-level package at `@babel/cli/bin`.
There is a shell-executable utility script, `babel-external-helpers.js`, and the main Babel cli script, `babel.js`.
See our website [@babel/cli](https://new.babeljs.io/docs/en/next/babel-cli.html) for more information.
## Install
```sh
npm install --save-dev @babel/core @babel/cli
```
## Usage
Using npm:
```sh
babel script.js
npm install --save @babel/cli
```
For more in depth documentation see: http://babeljs.io/docs/usage/cli/
or using yarn:
```sh
yarn add --save @babel/cli
```

View File

@ -2,141 +2,18 @@
> Generate errors that contain a code frame that point to source locations.
See our website [@babel/code-frame](https://new.babeljs.io/docs/en/next/babel-code-frame.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/code-frame
npm install --save @babel/code-frame
```
## Usage
or using yarn:
```js
import { codeFrameColumns } from '@babel/code-frame';
const rawLines = `class Foo {
constructor()
}`;
const location = { start: { line: 2, column: 16 } };
const result = codeFrameColumns(rawLines, location, { /* options */ });
console.log(result);
```
```
1 | class Foo {
> 2 | constructor()
| ^
3 | }
```
If the column number is not known, you may omit it.
You can also pass an `end` hash in `location`.
```js
import { codeFrameColumns } from '@babel/code-frame';
const rawLines = `class Foo {
constructor() {
console.log("hello");
}
}`;
const location = { start: { line: 2, column: 17 }, end: { line: 4, column: 3 } };
const result = codeFrameColumns(rawLines, location, { /* options */ });
console.log(result);
```
```
1 | class Foo {
> 2 | constructor() {
| ^
> 3 | console.log("hello");
| ^^^^^^^^^^^^^^^^^^^^^^^^^
> 4 | }
| ^^^
5 | };
```
## Options
### `highlightCode`
`boolean`, defaults to `false`.
Toggles syntax highlighting the code as JavaScript for terminals.
### `linesAbove`
`number`, defaults to `2`.
Adjust the number of lines to show above the error.
### `linesBelow`
`number`, defaults to `3`.
Adjust the number of lines to show below the error.
### `forceColor`
`boolean`, defaults to `false`.
Enable this to forcibly syntax highlight the code as JavaScript (for non-terminals); overrides `highlightCode`.
### `message`
`string`, otherwise nothing
Pass in a string to be displayed inline (if possible) next to the highlighted
location in the code. If it can't be positioned inline, it will be placed above
the code frame.
```
1 | class Foo {
> 2 | constructor()
| ^ Missing {
3 | };
```
## Upgrading from prior versions
Prior to version 7, the only API exposed by this module was for a single line and optional column pointer. The old API will now log a deprecation warning.
The new API takes a `location` object, similar to what is available in an AST.
This is an example of the deprecated (but still available) API:
```js
import codeFrame from '@babel/code-frame';
const rawLines = `class Foo {
constructor()
}`;
const lineNumber = 2;
const colNumber = 16;
const result = codeFrame(rawLines, lineNumber, colNumber, { /* options */ });
console.log(result);
```
To get the same highlighting using the new API:
```js
import { codeFrameColumns } from '@babel/code-frame';
const rawLines = `class Foo {
constructor() {
console.log("hello");
}
}`;
const location = { start: { line: 2, column: 16 } };
const result = codeFrameColumns(rawLines, location, { /* options */ });
console.log(result);
```sh
yarn add --save @babel/code-frame
```

View File

@ -2,249 +2,18 @@
> Babel compiler core.
See our website [@babel/core](https://new.babeljs.io/docs/en/next/babel-core.html) for more information.
```javascript
var babel = require("@babel/core");
import { transform } from "@babel/core";
import * as babel from "@babel/core";
## Install
Using npm:
```sh
npm install --save @babel/core
```
All transformations will use your local configuration files (`.babelrc` or in `package.json`). See [options](#options) to disable it.
or using yarn:
## babel.transform(code: string, [options?](#options): Object, callback: Function)
Transforms the passed in `code`. Calling a callback with an object with the generated code,
source map, and AST.
```js
babel.transform(code, options, function(err, result) {
result; // => { code, map, ast }
});
```sh
yarn add --save @babel/core
```
**Example**
```js
babel.transform("code();", options, function(err, result) {
result.code;
result.map;
result.ast;
});
```
### Compat Note:
In Babel 6, this method was synchronous and `transformSync` did not exist. For backward-compatibility,
this function will behave synchronously if no callback is given. If you're starting with Babel 7
and need synchronous behavior, please use `transformSync` since this backward-compat may be dropped in
future major versions of Babel.
## babel.transformSync(code: string, [options?](#options): Object)
Transforms the passed in `code`. Returning an object with the generated code,
source map, and AST.
```js
babel.transformSync(code, options) // => { code, map, ast }
```
**Example**
```js
var result = babel.transformSync("code();", options);
result.code;
result.map;
result.ast;
```
## babel.transformFile(filename: string, [options?](#options): Object, callback: Function)
Asynchronously transforms the entire contents of a file.
```js
babel.transformFile(filename, options, callback)
```
**Example**
```js
babel.transformFile("filename.js", options, function (err, result) {
result; // => { code, map, ast }
});
```
## babel.transformFileSync(filename: string, [options?](#options): Object)
Synchronous version of `babel.transformFile`. Returns the transformed contents of
the `filename`.
```js
babel.transformFileSync(filename, options) // => { code, map, ast }
```
**Example**
```js
babel.transformFileSync("filename.js", options).code;
```
## babel.transformFromAst(ast: Object, code?: string, [options?](#options): Object, callback: Function): FileNode | null
Given an [AST](https://astexplorer.net/), transform it.
```js
const sourceCode = "if (true) return;";
const parsedAst = babel.parse(sourceCode, { allowReturnOutsideFunction: true });
babel.transformFromAst(parsedAst, sourceCode, options, function(err, result) {
const { code, map, ast } = result;
});
```
### Compat Note:
In Babel 6, this method was synchronous and `transformFromAstSync` did not exist. For backward-compatibility,
this function will behave synchronously if no callback is given. If you're starting with Babel 7
and need synchronous behavior, please use `transformFromAstSync` since this backward-compat may be dropped in
future major versions of Babel.
## babel.transformFromAstSync(ast: Object, code?: string, [options?](#options): Object)
Given an [AST](https://astexplorer.net/), transform it.
```js
const sourceCode = "if (true) return;";
const parsedAst = babel.parse(sourceCode, { allowReturnOutsideFunction: true });
const { code, map, ast } = babel.transformFromAstSync(parsedAst, sourceCode, options);
```
## babel.parse(code: string, [options?](#options): Object)
Given some code, parse it using Babel's standard behavior. Referenced presets and
plugins will be loaded such that optional syntax plugins are automatically
enabled.
## Advanced APIs
Many systems that wrap Babel like to automatically inject plugins and presets,
or override options. To accomplish this goal, Babel exposes several functions
that aid in loading the configuration part-way without transforming.
### babel.loadOptions([options?](#options): Object)
Resolve Babel's options fully, resulting in an options object where:
* `opts.plugins` is a full list of `Plugin` instances.
* `opts.presets` is empty and all presets are flattened into `opts`.
* It can be safely passed back to Babel. Fields like `babelrc` have been set to
false so that later calls to Babel will not make a second attempt to load
config files.
`Plugin` instances aren't meant to be manipulated directly, but often
callers will serialize this `opts` to JSON to use it as a cache key representing
the options Babel has received. Caching on this isn't 100% guaranteed to
invalidate properly, but it is the best we have at the moment.
### babel.loadPartialConfig([options?](#options): Object): PartialConfig
To allow systems to easily manipulate and validate a user's config, this function
resolves the plugins and presets and proceeds no further. The expectation is
that callers will take the config's `.options`, manipulate it as then see fit
and pass it back to Babel again.
* `babelrc: string | void` - The path of the `.babelrc` file, if there was one.
* `babelignore: string | void` - The path of the `.babelignore` file, if there was one.
* `options: ValidatedOptions` - The partially resolved options, which can be manipulated and passed back to Babel again.
* `plugins: Array<ConfigItem>` - See below.
* `presets: Array<ConfigItem>` - See below.
* It can be safely passed back to Babel. Fields like `babelrc` have been set
to false so that later calls to Babel will not make a second attempt to
load config files.
* `hasFilesystemConfig(): boolean` - Check if the resolved config loaded any settings from the filesystem.
[`ConfigItem`](#configitem-type) instances expose properties to introspect the values, but each
item should be treated as immutable. If changes are desired, the item should be
removed from the list and replaced with either a normal Babel config value, or
with a replacement item created by `babel.createConfigItem`. See that
function for information about `ConfigItem` fields.
### babel.createConfigItem(value: string | {} | Function | [string | {} | Function, {} | void], { dirname?: string, type?: "preset" | "plugin" }): ConfigItem
Allows build tooling to create and cache config items up front. If this function
is called multiple times for a given plugin, Babel will call the plugin's function itself
multiple times. If you have a clear set of expected plugins and presets to
inject, pre-constructing the config items would be recommended.
### `ConfigItem` type
Each `ConfigItem` exposes all of the information Babel knows. The fields are:
* `value: {} | Function` - The resolved value of the plugin.
* `options: {} | void` - The options object passed to the plugin.
* `dirname: string` - The path that the options are relative to.
* `name: string | void` - The name that the user gave the plugin instance, e.g. `plugins: [ ['env', {}, 'my-env'] ]`
* `file: Object | void` - Information about the plugin's file, if Babel knows it.
* `request: string` - The file that the user requested, e.g. `"@babel/env"`
* `resolved: string` - The full path of the resolved file, e.g. `"/tmp/node_modules/@babel/preset-env/lib/index.js"`
## Options
<blockquote class="babel-callout babel-callout-info">
<h4>Babel CLI</h4>
<p>
You can pass these options from the Babel CLI like so:
</p>
<p>
<code>babel --option-name<span class="o">=</span>value</code>
</p>
</blockquote>
Following is a table of the options you can use:
| Option | Default | Description |
| ------------------------ | -------------------- | ------------------------------- |
| `ast` | `false` | Include the AST in the returned object |
| `auxiliaryCommentAfter` | `null` | Attach a comment after all non-user injected code |
| `auxiliaryCommentBefore` | `null` | Attach a comment before all non-user injected code |
| `root` | `"."` | Specify the "root" folder that defines the location to search for "babel.config.js", and the default folder to allow `.babelrc` files inside of.|
| `configFile` | `undefined` | The config file to load Babel's config from. Defaults to searching for "babel.config.js" inside the "root" folder. `false` will disable searching for config files.|
| `babelrc` | `true` | Specify whether or not to use .babelrc and .babelignore files. Not available when using the CLI, [use `--no-babelrc` instead](https://babeljs.io/docs/usage/cli/#babel-ignoring-babelrc) |
| `babelrcRoots` | `(root)` | Specify which packages should be search for .babelrc files when they are being compiled. `true` to _always_ search, or a path string or an array of paths to packages to search inside of. Defaults to only searching the "root" package. |
| `envName` | env vars | Defaults to environment variable `BABEL_ENV` if set, or else `NODE_ENV` if set, or else it defaults to `"development"` |
| `code` | `true` | Enable code generation |
| `comments` | `true` | Output comments in generated output |
| `compact` | `"auto"` | Do not include superfluous whitespace characters and line terminators. When set to `"auto"` compact is set to `true` on input sizes of >500KB |
| `env` | `{}` | This is an object of keys that represent different environments. For example, you may have: `{ env: { production: { /* specific options */ } } }` which will use those options when the `envName` is `production` |
| `extends` | `null` | A path to a `.babelrc` file to extend |
| `filename` | `"unknown"` | Filename for use in errors etc |
| `filenameRelative` | `(filename)` | Filename relative to `sourceRoot` |
| `generatorOpts` | `{}` | An object containing the options to be passed down to the babel code generator, @babel/generator |
| `getModuleId` | `null` | Specify a custom callback to generate a module id with. Called as `getModuleId(moduleName)`. If falsy value is returned then the generated module id is used |
| `highlightCode` | `true` | ANSI highlight syntax error code frames |
| `ignore` | `null` | Opposite to the `only` option. `ignore` is disregarded if `only` is specified |
| `inputSourceMap` | `null` | A source map object that the output source map will be based on |
| `minified` | `false` | Should the output be minified (not printing last semicolons in blocks, printing literal string values instead of escaped ones, stripping `()` from `new` when safe) |
| `moduleId` | `null` | Specify a custom name for module ids |
| `moduleIds` | `false` | If truthy, insert an explicit id for modules. By default, all modules are anonymous. (Not available for `common` modules) |
| `moduleRoot` | `(sourceRoot)` | Optional prefix for the AMD module formatter that will be prepend to the filename on module definitions |
| `only` | `null` | A [glob](https://github.com/isaacs/minimatch), regex, or mixed array of both, matching paths to **only** compile. Can also be an array of arrays containing paths to explicitly match. When attempting to compile a non-matching file it's returned verbatim |
| `parserOpts` | `{}` | An object containing the options to be passed down to the babel parser, @babel/parser |
| `plugins` | `[]` | List of [plugins](https://babeljs.io/docs/plugins/) to load and use |
| `presets` | `[]` | List of [presets](https://babeljs.io/docs/plugins/#presets) (a set of plugins) to load and use |
| `retainLines` | `false` | Retain line numbers. This will lead to wacky code but is handy for scenarios where you can't use source maps. (**NOTE:** This will not retain the columns) |
| `shouldPrintComment` | `null` | An optional callback that controls whether a comment should be output or not. Called as `shouldPrintComment(commentContents)`. **NOTE:** This overrides the `comment` option when used |
| `sourceFileName` | `(filenameRelative)` | Set `sources[0]` on returned source map |
| `sourceMaps` | `false` | If truthy, adds a `map` property to returned output. If set to `"inline"`, a comment with a sourceMappingURL directive is added to the bottom of the returned code. If set to `"both"` then a `map` property is returned as well as a source map comment appended. **This does not emit sourcemap files by itself!** To have sourcemaps emitted using the CLI, you must pass it the `--source-maps` option |
| `sourceRoot` | `(moduleRoot)` | The root from which all sources are relative |
| `sourceType` | `"module"` | Indicate the mode the code should be parsed in. Can be one of "script", "module", or "unambiguous". `"unambiguous"` will make Babel attempt to _guess_, based on the presence of ES6 `import` or `export` statements. Files with ES6 `import`s and `export`s are considered `"module"` and are otherwise `"script"`. |
| `wrapPluginVisitorMethod`| `null` | An optional callback that can be used to wrap visitor methods. **NOTE:** This is useful for things like introspection, and not really needed for implementing anything. Called as `wrapPluginVisitorMethod(pluginAlias, visitorType, callback)`.

View File

@ -1,78 +1,19 @@
# @babel/generator
> Turns the [babel AST](https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md) into code.
> Turns an AST into code.
See our website [@babel/generator](https://new.babeljs.io/docs/en/next/babel-generator.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/generator
npm install --save @babel/generator
```
## Usage
or using yarn:
```js
import {parse} from '@babel/parser';
import generate from '@babel/generator';
const code = 'class Example {}';
const ast = parse(code);
const output = generate(ast, { /* options */ }, code);
```
## Options
Options for formatting output:
name | type | default | description
-----------------------|----------|-----------------|--------------------------------------------------------------------------
auxiliaryCommentBefore | string | | Optional string to add as a block comment at the start of the output file
auxiliaryCommentAfter | string | | Optional string to add as a block comment at the end of the output file
shouldPrintComment | function | `opts.comments` | Function that takes a comment (as a string) and returns `true` if the comment should be included in the output. By default, comments are included if `opts.comments` is `true` or if `opts.minifed` is `false` and the comment contains `@preserve` or `@license`
retainLines | boolean | `false` | Attempt to use the same line numbers in the output code as in the source code (helps preserve stack traces)
retainFunctionParens | boolean | `false` | Retain parens around function expressions (could be used to change engine parsing behavior)
comments | boolean | `true` | Should comments be included in output
compact | boolean or `'auto'` | `opts.minified` | Set to `true` to avoid adding whitespace for formatting
minified | boolean | `false` | Should the output be minified
concise | boolean | `false` | Set to `true` to reduce whitespace (but not as much as `opts.compact`)
filename | string | | Used in warning messages
jsonCompatibleStrings | boolean | `false` | Set to true to run `jsesc` with "json": true to print "\u00A9" vs. "©";
Options for source maps:
name | type | default | description
-----------------------|----------|-----------------|--------------------------------------------------------------------------
sourceMaps | boolean | `false` | Enable generating source maps
sourceRoot | string | | A root for all relative URLs in the source map
sourceFileName | string | | The filename for the source code (i.e. the code in the `code` argument). This will only be used if `code` is a string.
## AST from Multiple Sources
In most cases, Babel does a 1:1 transformation of input-file to output-file. However,
you may be dealing with AST constructed from multiple sources - JS files, templates, etc.
If this is the case, and you want the sourcemaps to reflect the correct sources, you'll need
to pass an object to `generate` as the `code` parameter. Keys
should be the source filenames, and values should be the source content.
Here's an example of what that might look like:
```js
import {parse} from '@babel/parser';
import generate from '@babel/generator';
const a = 'var a = 1;';
const b = 'var b = 2;';
const astA = parse(a, { sourceFilename: 'a.js' });
const astB = parse(b, { sourceFilename: 'b.js' });
const ast = {
type: 'Program',
body: [].concat(astA.program.body, astB.program.body)
};
const { code, map } = generate(ast, { sourceMaps: true }, {
'a.js': a,
'b.js': b
});
// Sourcemap will point to both a.js and b.js where appropriate.
```sh
yarn add --save @babel/generator
```

View File

@ -1,40 +1,19 @@
# @babel/helper-annotate-as-pure
## API
> Helper function to annotate paths and nodes with #__PURE__ comment
```js
declare export default annotateAsPure(nodeOrPath: Node | NodePath);
See our website [@babel/helper-annotate-as-pure](https://new.babeljs.io/docs/en/next/babel-helper-annotate-as-pure.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-annotate-as-pure
```
## Usage
or using yarn:
```js
import traverse from "@babel/traverse";
import annotateAsPure from "@babel/helper-annotate-as-pure";
// ...
traverse(file, {
CallExpression(path) {
annotateAsPure(path);
},
});
```
## Caveat with UglifyJS pre v3.1.0
`@babel/helper-annotate-as-pure` will append any existing leading comments to the `#__PURE__` annotation. Versions of UglifyJS prior to v3.1.0 will **ignore** these annotations, as they only check the _last_ leading comment for the annotation.
For example, using the `Usage` snippet above:
**In**
```js
const four = /* foo */ add(2, 2);
```
**Out**
```js
const four = /* #__PURE__ */ /* foo */ add(2, 2);
```sh
yarn add --save @babel/helper-annotate-as-pure
```

View File

@ -1,9 +1,19 @@
# @babel/helper-bindify-decorators
## API
```javascript
declare export default bindifyDecorators(decorators: Array<NodePath>);
```
## Usage
> Helper function to bindify decorators
TODO
See our website [@babel/helper-bindify-decorators](https://new.babeljs.io/docs/en/next/babel-helper-bindify-decorators.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-bindify-decorators
```
or using yarn:
```sh
yarn add --save @babel/helper-bindify-decorators
```

View File

@ -1,5 +1,19 @@
# @babel/helper-builder-binary-assignment-operator-visitor
## Usage
> Helper function to build binary assignment operator visitors
TODO
See our website [@babel/helper-builder-binary-assignment-operator-visitor](https://new.babeljs.io/docs/en/next/babel-helper-builder-binary-assignment-operator-visitor.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-builder-binary-assignment-operator-visitor
```
or using yarn:
```sh
yarn add --save @babel/helper-builder-binary-assignment-operator-visitor
```

View File

@ -1,28 +1,19 @@
# @babel/helper-builder-react-jsx
## Usage
> Helper function to build react jsx
```javascript
type ElementState = {
tagExpr: Object; // tag node
tagName: string; // raw string tag name
args: Array<Object>; // array of call arguments
call?: Object; // optional call property that can be set to override the call expression returned
};
See our website [@babel/helper-builder-react-jsx](https://new.babeljs.io/docs/en/next/babel-helper-builder-react-jsx.html) for more information.
require("@babel/helper-builder-react-jsx")({
filter: function (element: JSXElement) {
// if returns false, the element isn't transformed
},
## Install
pre: function (state: ElementState) {
// function called with (state: ElementState) before building attribs
},
Using npm:
post: function (state: ElementState) {
// function called with (state: ElementState) after building attribs
},
compat?: boolean // true if React is in compat mode
});
```sh
npm install --save @babel/helper-builder-react-jsx
```
or using yarn:
```sh
yarn add --save @babel/helper-builder-react-jsx
```

View File

@ -1,5 +1,19 @@
# @babel/helper-call-delegate
## Usage
> Helper function to call delegate
TODO
See our website [@babel/helper-call-delegate](https://new.babeljs.io/docs/en/next/babel-helper-call-delegate.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-call-delegate
```
or using yarn:
```sh
yarn add --save @babel/helper-call-delegate
```

View File

@ -1,5 +1,19 @@
# @babel/helper-define-map
## Usage
> Helper function to define a map
TODO
See our website [@babel/helper-define-map](https://new.babeljs.io/docs/en/next/babel-helper-define-map.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-define-map
```
or using yarn:
```sh
yarn add --save @babel/helper-define-map
```

View File

@ -1,5 +1,19 @@
# @babel/helper-explode-assignable-expression
## Usage
> Helper function to explode an assignable expression
TODO
See our website [@babel/helper-explode-assignable-expression](https://new.babeljs.io/docs/en/next/babel-helper-explode-assignable-expression.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-explode-assignable-expression
```
or using yarn:
```sh
yarn add --save @babel/helper-explode-assignable-expression
```

View File

@ -1,5 +1,19 @@
# @babel/helper-explode-class
## Usage
> Helper function to explode class
TODO
See our website [@babel/helper-explode-class](https://new.babeljs.io/docs/en/next/babel-helper-explode-class.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-explode-class
```
or using yarn:
```sh
yarn add --save @babel/helper-explode-class
```

View File

@ -1,33 +1,19 @@
# @babel/helper-fixtures
**NOTE:** This is an internal Babel module and may not work outside. Use at your own risk.
> Helper function to support fixtures
## Usage
See our website [@babel/helper-fixtures](https://new.babeljs.io/docs/en/next/babel-helper-fixtures.html) for more information.
```javascript
import getFixtures from "@babel/helper-fixtures";
## Install
type TestFile = {
loc: string;
code: string;
filename: string;
};
Using npm:
type Test = {
title: string;
disabled: boolean;
options: Object;
exec: TestFile;
actual: TestFile;
expected: TestFile;
};
type Suite = {
options: Object;
tests: Array<Test>;
title: string;
filename: string;
};
let fixtures: Array<Suite> = getFixtures("/User/sebmck/Projects/babel-something/test/fixtures");
```sh
npm install --save @babel/helper-fixtures
```
or using yarn:
```sh
yarn add --save @babel/helper-fixtures
```

View File

@ -1,5 +1,19 @@
# @babel/helper-function-name
## Usage
> Helper function to change the property 'name' of every function
TODO
See our website [@babel/helper-function-name](https://new.babeljs.io/docs/en/next/babel-helper-function-name.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-function-name
```
or using yarn:
```sh
yarn add --save @babel/helper-function-name
```

View File

@ -1,21 +1,19 @@
# @babel/helper-get-function-arity
Function that returns the number of arguments that a function takes.
* Examples of what is considered an argument can be found at [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length)
> Helper function to get function arity
## Usage
See our website [@babel/helper-get-function-arity](https://new.babeljs.io/docs/en/next/babel-helper-get-function-arity.html) for more information.
```javascript
import getFunctionArity from "@babel/helper-get-function-arity";
## Install
function wrap(state, method, id, scope) {
// ...
if (!t.isFunction(method)) {
return false;
}
Using npm:
const argumentsLength = getFunctionArity(method);
// ...
}
```sh
npm install --save @babel/helper-get-function-arity
```
or using yarn:
```sh
yarn add --save @babel/helper-get-function-arity
```

View File

@ -1,17 +1,19 @@
# @babel/helper-hoist-variables
## Installation
> Helper function to hoist variables
See our website [@babel/helper-hoist-variables](https://new.babeljs.io/docs/en/next/babel-helper-hoist-variables.html) for more information.
## Install
Using npm:
```sh
npm install @babel/helper-hoist-variables --save
npm install --save @babel/helper-hoist-variables
```
## API
or using yarn:
```javascript
declare export default hoistVariables(path: NodePath, emit: Function, kind: "var" | "let" = "var");
```sh
yarn add --save @babel/helper-hoist-variables
```
## Usage
TODO

View File

@ -1,75 +1,19 @@
# @babel/helper-member-expression-to-functions
Helper function to replace certain member expressions with function calls
> Helper function to replace certain member expressions with function calls
## Usage
See our website [@babel/helper-member-expression-to-functions](https://new.babeljs.io/docs/en/next/babel-helper-member-expression-to-functions.html) for more information.
> Designed for internal Babel use.
## Install
Traverses the `path` using the supplied `visitor` and an augmented `state`.
Using npm:
```js
const visitor = {
MemberExpression(memberPath, state) {
if (someCondition(memberPath)) {
// The handle method is supplied by memberExpressionToFunctions.
// It should be called whenever a MemberExpression should be
// converted into the proper function calls.
state.handle(memberPath);
}
},
};
// The helper requires three special methods on state: `get`, `set`, and
// `call`.
// Optionally, a special `memoise` method may be defined, which gets
// called if the member is in a self-referential update expression.
// Everything else will be passed through as normal.
const state = {
get(memberPath) {
// Return some AST that will get the member
return t.callExpression(
this.file.addHelper('superGet'),
[t.thisExpression(), memberPath.node.property]
);
},
set(memberPath, value) {
// Return some AST that will set the member
return t.callExpression(
this.file.addHelper('superSet'),
[t.thisExpression(), memberPath.node.property, value]
);
},
call(memberPath, args) {
// Return some AST that will call the member with the proper context
// and args
return t.callExpression(
t.memberExpression(this.get(memberPath), t.identifier("apply")),
[t.thisExpression(), t.arrayExpression(args)]
);
},
memoise(memberPath) {
const { node } = memberPath;
if (node.computed) {
MEMOISED.set(node, ...);
}
},
// The handle method is provided by memberExpressionToFunctions.
// handle(memberPath) { ... }
// Other state stuff is left untouched.
someState: new Set(),
};
// Replace all the special MemberExpressions in rootPath, as determined
// by our visitor, using the state methods.
memberExpressionToFunctions(rootPath, visitor, state);
```sh
npm install --save @babel/helper-member-expression-to-functions
```
or using yarn:
```sh
yarn add --save @babel/helper-member-expression-to-functions
```

View File

@ -1,77 +1,19 @@
# @babel/helper-module-imports
## Installation
> Babel helper functions for inserting module loads
See our website [@babel/helper-module-imports](https://new.babeljs.io/docs/en/next/babel-helper-module-imports.html) for more information.
## Install
Using npm:
```sh
npm install @babel/helper-module-imports --save
npm install --save @babel/helper-module-imports
```
## Usage
or using yarn:
### `import "source"`
```js
import { addSideEffect } from "@babel/helper-module-imports";
addSideEffect(path, 'source');
```
### `import { named } from "source"`
```js
import { addNamed } from "@babel/helper-module-imports";
addNamed(path, 'named', 'source');
```
### `import { named as _hintedName } from "source"`
```js
import { addNamed } from "@babel/helper-module-imports";
addNamed(path, 'named', 'source', { nameHint: "hintedName" });
```
### `import _default from "source"`
```js
import { addDefault } from "@babel/helper-module-imports";
addDefault(path, 'source');
```
### `import hintedName from "source"`
```js
import { addDefault } from "@babel/helper-module-imports";
addDefault(path, 'source', { nameHint: "hintedName" })
```
### `import * as _namespace from "source"`
```js
import { addNamespace } from "@babel/helper-module-imports";
addNamespace(path, 'source');
```
## Examples
### Adding a named import
```js
import { addNamed } from "@babel/helper-module-imports";
export default function({ types: t }) {
return {
visitor: {
ReferencedIdentifier(path) {
let importName = this.importName;
if (importName) {
importName = t.cloneDeep(importName);
} else {
// require('bluebird').coroutine
importName = this.importName = addNamed(path, 'coroutine', 'bluebird');
}
path.replaceWith(importName);
}
},
};
}
```sh
yarn add --save @babel/helper-module-imports
```

View File

@ -1,5 +1,19 @@
# @babel/helper-module-transforms
## Usage
> Babel helper functions for implementing ES6 module transformations
TODO
See our website [@babel/helper-module-transforms](https://new.babeljs.io/docs/en/next/babel-helper-module-transforms.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-module-transforms
```
or using yarn:
```sh
yarn add --save @babel/helper-module-transforms
```

View File

@ -1,5 +1,19 @@
# @babel/helper-optimise-call-expression
## Usage
> Helper function to optimise call expression
TODO
See our website [@babel/helper-optimise-call-expression](https://new.babeljs.io/docs/en/next/babel-helper-optimise-call-expression.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-optimise-call-expression
```
or using yarn:
```sh
yarn add --save @babel/helper-optimise-call-expression
```

View File

@ -1,17 +1,19 @@
# @babel/helper-plugin-test-runner
**NOTE:** This is an internal Babel module and may not work outside. Use at your own risk.
> Helper function to support test runner
## Usage:
See our website [@babel/helper-plugin-test-runner](https://new.babeljs.io/docs/en/next/babel-helper-plugin-test-runner.html) for more information.
> Check Babel for an example: https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-exponentiation-operator/test
## Install
1. Inside a `/test` directory, add an `index.js` with the contents
```js
import runner from "@babel/helper-plugin-test-runner";
Using npm:
runner(__dirname);
```sh
npm install --save @babel/helper-plugin-test-runner
```
or using yarn:
```sh
yarn add --save @babel/helper-plugin-test-runner
```
2. Inside `/test/fixtures`, create a folder for each suite (eg; one suite for each feature of your plugin).
3. Suite folders may contain files and folders. Files will be transformed and run; use `expect()` assertions to verify correct behavior. Folders may contain `input.js`, `output.js`, and/or `exec.js`. The output of transforming `input.js` will be checked to match the contents of `output.js`. `exec.js`, if it exists, will be transformed and run, as with a file in the suite folder.
3. To run a specific test, run `TEST_GREP=testName make test`. [Read more](https://github.com/babel/babel/blob/master/CONTRIBUTING.md#running-lintingtests).

View File

@ -1,41 +1,19 @@
# @babel/helper-plugin-utils
The intention of this module is to provide a place for us to expose a
standardized API layer over top of what Babel's core API provides on its own.
> General utilities for plugins to use
This is not aiming to implement APIs that are missing on a given Babel version,
but it is means to provide clear error messages if a plugin is run on a version
of Babel that doesn't have the APIs that the plugin is trying to use.
See our website [@babel/helper-plugin-utils](https://new.babeljs.io/docs/en/next/babel-helper-plugin-utils.html) for more information.
Every one of Babel's core plugins and presets will use this module, and ideally
because of that its size should be kept to a miminum because this may or may
not be deduplicated when installed.
## Install
Using npm:
## Usage
```js
import { declare } from "@babel/helper-plugin-utils";
export default declare((api, options, dirname) => {
return {};
});
```sh
npm install --save @babel/helper-plugin-utils
```
or using yarn:
## What this does
Currently, this plugin provides a few services to ensure that plugins function
well-enough to throw useful errors.
### `options` is always passed
Babel 6 does not pass a second parameter. This frequently means that plugins
written for Babel 7 that use `options` will attempt to destructure options
out of an `undefined` value. By supplying the default, we avoid that risk.
### `api.assertVersion` always exists
Babel 6 and early betas of Babel 7 do not have `assertVersion`, so this
wrapper ensures that it exists and throws a useful error message when not
supplied by Babel itself.
```sh
yarn add --save @babel/helper-plugin-utils
```

View File

@ -1,5 +1,19 @@
# @babel/helper-regex
## Usage
> Helper function to check for literal RegEx
TODO
See our website [@babel/helper-regex](https://new.babeljs.io/docs/en/next/babel-helper-regex.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-regex
```
or using yarn:
```sh
yarn add --save @babel/helper-regex
```

View File

@ -1,5 +1,19 @@
# @babel/helper-remap-async-to-generator
## Usage
> Helper function to remap async functions to generators
TODO
See our website [@babel/helper-remap-async-to-generator](https://new.babeljs.io/docs/en/next/babel-helper-remap-async-to-generator.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-remap-async-to-generator
```
or using yarn:
```sh
yarn add --save @babel/helper-remap-async-to-generator
```

View File

@ -1,5 +1,19 @@
# @babel/helper-replace-supers
## Usage
> Helper function to replace supers
TODO
See our website [@babel/helper-replace-supers](https://new.babeljs.io/docs/en/next/babel-helper-replace-supers.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-replace-supers
```
or using yarn:
```sh
yarn add --save @babel/helper-replace-supers
```

View File

@ -1,26 +1,19 @@
# @babel/helper-simple-assignment
# @babel/helper-simple-access
There are many cases where it is hard to perform transformations because a
piece of code is using complex structures. Say you want to rewrite all accesses
to a given variable, and there are cases like
> Babel helper for ensuring that access to a given value is performed through simple accesses
```
i += 1
--i;
See our website [@babel/helper-simple-access](https://new.babeljs.io/docs/en/next/babel-helper-simple-access.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-simple-access
```
It is difficult to work with.
This helper can handle converting these to simple access patterns of standard
assignment. This plugin does _not_ handle
or using yarn:
```sh
yarn add --save @babel/helper-simple-access
```
{ a } = foo;
```
so assignment to patterns still needs to be handled when you are processing
updates to values.
## Usage
TODO

View File

@ -1,23 +1,19 @@
# @babel/helper-split-export-declaration
## API
>
```js
declare export default splitExportDeclaration(path: NodePath);
See our website [@babel/helper-split-export-declaration](https://new.babeljs.io/docs/en/next/babel-helper-split-export-declaration.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/helper-split-export-declaration
```
## Usage
or using yarn:
```js
import traverse from "@babel/traverse";
import splitExportDeclaration from "@babel/helper-split-export-declaration";
// ...
traverse(file, {
ExportDefaultDeclaration(path) {
if (!path.get("declaration").isClassDeclaration()) return;
splitExportDeclaration(path);
},
});
```sh
yarn add --save @babel/helper-split-export-declaration
```

View File

@ -1,11 +1,19 @@
# @babel/helper-transform-fixture-test-runner
**NOTE:** This is an internal Babel module and may not work outside. Use at your own risk.
> Transform test runner for @babel/helper-fixtures module
## Usage
See our website [@babel/helper-transform-fixture-test-runner](https://new.babeljs.io/docs/en/next/babel-helper-transform-fixture-test-runner.html) for more information.
```javascript
import runFixtures from "@babel/helper-transform-fixture-test-runner";
## Install
runFixtures("/User/sebmck/Projects/babel-something/test/fixtures");
Using npm:
```sh
npm install --save @babel/helper-transform-fixture-test-runner
```
or using yarn:
```sh
yarn add --save @babel/helper-transform-fixture-test-runner
```

View File

@ -1,27 +1,19 @@
# @babel/helper-wrap-function
This helper wraps a function within a call expression. It works with any function: statements, expressions and methods; both named and anonymous.
> Helper to wrap functions inside a function call.
## Example
See our website [@babel/helper-wrap-function](https://new.babeljs.io/docs/en/next/babel-helper-wrap-function.html) for more information.
**In**
## Install
```js
(function () {
}());
Using npm:
```sh
npm install --save @babel/helper-wrap-function
```
**Out**
or using yarn:
```js
_wrapper(function () {
})();
```
## Usage
```js
import wrapFunction from "@babel/helper-wrap-function";
wrapFunction(nodePathOfTheFunction, nodeWhichReferencesToTheWrapper);
```sh
yarn add --save @babel/helper-wrap-function
```

View File

@ -2,57 +2,18 @@
> Collection of helper functions used by Babel transforms.
See our website [@babel/helpers](https://new.babeljs.io/docs/en/next/babel-helpers.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/helpers
npm install --save @babel/helpers
```
## Usage
or using yarn:
Direct:
```js
import * as helpers from '@babel/helpers';
import * as t from '@babel/types';
const typeofHelper = helpers.get('typeof');
t.isExpressionStatement(typeofHelper);
// true
```
Inside a plugin:
```js
export default {
visitor: {
UnaryExpression(path) {
// The .addHelper function adds, if needed, the helper to the file
// and returns an expression which references the helper
const typeofHelper = this.addHelper("typeof");
t.isExpression(typeofHelper); // true
}
};
```
## Defining Helpers
> **NOTE**: This package is only meant to be used by the packages included in this repository. There is currently no way for third-party plugins to define a helper.
Helpers are defined in the `src/helpers.js` file, and they must be valid modules which follow these guidelines:
- They must have a default export, which is their entry-point.
- They can import other helpers, exclusively by using default imports.
- They can't have named exports.
```js
helpers.customHelper = defineHelper(`
import dep from "dependency";
const foo = 2;
export default function getFooTimesDepPlusX(x) {
return foo * dep() + x;
}
`);
```sh
yarn add --save @babel/helpers
```

View File

@ -2,40 +2,18 @@
> Syntax highlight JavaScript strings for output in terminals.
See our website [@babel/highlight](https://new.babeljs.io/docs/en/next/babel-highlight.html) for more information.
## Install
Using npm:
```sh
npm install --save @babel/highlight
```
## Usage
or using yarn:
```js
import highlight from "@babel/highlight";
const code = `class Foo {
constructor()
}`;
const result = highlight(code);
console.log(result);
```
```js
class Foo {
constructor()
}
```
By default, `highlight` will not highlight your code if your terminal does not support color. To force colors, pass `{ forceColor: true }` as the second argument to `highlight`.
```js
import highlight from "@babel/highlight";
const code = `class Foo {
constructor()
}`;
const result = highlight(code, { forceColor: true });
```sh
yarn add --save @babel/highlight
```

View File

@ -1,17 +1,19 @@
# @babel/node
> A Babel-powered Node.js CLI
> Babel command line
babel-node is a CLI that works exactly the same as the Node.js CLI, with the added benefit of compiling with Babel presets and plugins before running it.
See our website [@babel/node](https://new.babeljs.io/docs/en/next/babel-node.html) for more information.
## Install
```sh
npm install --save-dev @babel/core @babel/node
```
## Usage
Using npm:
```sh
babel-node [options] [ -e script | script.js ] [arguments]
npm install --save @babel/node
```
or using yarn:
```sh
yarn add --save @babel/node
```

View File

@ -1,186 +1,19 @@
<p align="center">
<img alt="@babel/parser" src="https://raw.githubusercontent.com/babel/logo/master/babylon.png" width="700">
</p>
# @babel/parser
<p align="center">
The Babel parser (previously Babylon) is a JavaScript parser used in <a href="https://github.com/babel/babel">Babel</a>.
</p>
> A JavaScript parser
- The latest ECMAScript version enabled by default (ES2017).
- Comment attachment.
- Support for JSX, Flow, Typescript.
- Support for experimental language proposals (accepting PRs for anything at least [stage-0](https://github.com/tc39/proposals/blob/master/stage-0-proposals.md)).
See our website [@babel/parser](https://new.babeljs.io/docs/en/next/babel-parser.html) for more information.
## Credits
## Install
Heavily based on [acorn](https://github.com/marijnh/acorn) and [acorn-jsx](https://github.com/RReverser/acorn-jsx),
thanks to the awesome work of [@RReverser](https://github.com/RReverser) and [@marijnh](https://github.com/marijnh).
Using npm:
## API
### `babelParser.parse(code, [options])`
### `babelParser.parseExpression(code, [options])`
`parse()` parses the provided `code` as an entire ECMAScript program, while
`parseExpression()` tries to parse a single Expression with performance in
mind. When in doubt, use `.parse()`.
### Options
- **allowImportExportEverywhere**: By default, `import` and `export`
declarations can only appear at a program's top level. Setting this
option to `true` allows them anywhere where a statement is allowed.
- **allowAwaitOutsideFunction**: By default, `await` use is not allowed
outside of an async function. Set this to `true` to accept such
code.
- **allowReturnOutsideFunction**: By default, a return statement at
the top level raises an error. Set this to `true` to accept such
code.
- **allowSuperOutsideMethod**: TODO
- **sourceType**: Indicate the mode the code should be parsed in. Can be
one of `"script"`, `"module"`, or `"unambiguous"`. Defaults to `"script"`. `"unambiguous"` will make @babel/parser attempt to _guess_, based on the presence of ES6 `import` or `export` statements. Files with ES6 `import`s and `export`s are considered `"module"` and are otherwise `"script"`.
- **sourceFilename**: Correlate output AST nodes with their source filename. Useful when generating code and source maps from the ASTs of multiple input files.
- **startLine**: By default, the first line of code parsed is treated as line 1. You can provide a line number to alternatively start with. Useful for integration with other source tools.
- **plugins**: Array containing the plugins that you want to enable.
- **strictMode**: TODO
- **ranges**: Adds a `ranges` property to each node: `[node.start, node.end]`
- **tokens**: Adds all parsed tokens to a `tokens` property on the `File` node
### Output
The Babel parser generates AST according to [Babel AST format][].
It is based on [ESTree spec][] with the following deviations:
> There is now an `estree` plugin which reverts these deviations
- [Literal][] token is replaced with [StringLiteral][], [NumericLiteral][], [BooleanLiteral][], [NullLiteral][], [RegExpLiteral][]
- [Property][] token is replaced with [ObjectProperty][] and [ObjectMethod][]
- [MethodDefinition][] is replaced with [ClassMethod][]
- [Program][] and [BlockStatement][] contain additional `directives` field with [Directive][] and [DirectiveLiteral][]
- [ClassMethod][], [ObjectProperty][], and [ObjectMethod][] value property's properties in [FunctionExpression][] is coerced/brought into the main method node.
AST for JSX code is based on [Facebook JSX AST][].
[Babel AST format]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md
[ESTree spec]: https://github.com/estree/estree
[Literal]: https://github.com/estree/estree/blob/master/es5.md#literal
[Property]: https://github.com/estree/estree/blob/master/es5.md#property
[MethodDefinition]: https://github.com/estree/estree/blob/master/es2015.md#methoddefinition
[StringLiteral]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#stringliteral
[NumericLiteral]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#numericliteral
[BooleanLiteral]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#booleanliteral
[NullLiteral]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#nullliteral
[RegExpLiteral]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#regexpliteral
[ObjectProperty]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#objectproperty
[ObjectMethod]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#objectmethod
[ClassMethod]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#classmethod
[Program]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#programs
[BlockStatement]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#blockstatement
[Directive]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#directive
[DirectiveLiteral]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#directiveliteral
[FunctionExpression]: https://github.com/babel/babel/tree/master/packages/babel-parser/ast/spec.md#functionexpression
[Facebook JSX AST]: https://github.com/facebook/jsx/blob/master/AST.md
### Semver
The Babel Parser follows semver in most situations. The only thing to note is that some spec-compliancy bug fixes may be released under patch versions.
For example: We push a fix to early error on something like [#107](https://github.com/babel/babylon/pull/107) - multiple default exports per file. That would be considered a bug fix even though it would cause a build to fail.
### Example
```javascript
require("@babel/parser").parse("code", {
// parse in strict mode and allow module declarations
sourceType: "module",
plugins: [
// enable jsx and flow syntax
"jsx",
"flow"
]
});
```sh
npm install --save @babel/parser
```
### Plugins
or using yarn:
| Name | Code Example |
|------|--------------|
| `estree` ([repo](https://github.com/estree/estree)) | n/a |
| `jsx` ([repo](https://facebook.github.io/jsx/)) | `<a attr="b">{s}</a>` |
| `flow` ([repo](https://github.com/facebook/flow)) | `var a: string = "";` |
| `flowComments` ([docs](https://flow.org/en/docs/types/comments/)) | `/*:: type Foo = {...}; */` |
| `typescript` ([repo](https://github.com/Microsoft/TypeScript)) | `var a: string = "";` |
| `doExpressions` | `var a = do { if (true) { 'hi'; } };` |
| `objectRestSpread` ([proposal](https://github.com/tc39/proposal-object-rest-spread)) | `var a = { b, ...c };` |
| `decorators` (Stage 2 [proposal](https://github.com/tc39/proposal-decorators)) and `decorators-legacy` (Stage 1) | `@a class A {}` |
| `classProperties` ([proposal](https://github.com/tc39/proposal-class-public-fields)) | `class A { b = 1; }` |
| `classPrivateProperties` ([proposal](https://github.com/tc39/proposal-private-fields)) | `class A { #b = 1; }` |
| `classPrivateMethods` ([proposal](https://github.com/tc39/proposal-private-methods)) | `class A { #c() {} }` |
| `exportDefaultFrom` ([proposal](https://github.com/leebyron/ecmascript-export-default-from)) | `export v from "mod"` |
| `exportNamespaceFrom` ([proposal](https://github.com/leebyron/ecmascript-export-ns-from)) | `export * as ns from "mod"` |
| `asyncGenerators` ([proposal](https://github.com/tc39/proposal-async-iteration)) | `async function*() {}`, `for await (let a of b) {}` |
| `functionBind` ([proposal](https://github.com/zenparsing/es-function-bind)) | `a::b`, `::console.log` |
| `functionSent` | `function.sent` |
| `dynamicImport` ([proposal](https://github.com/tc39/proposal-dynamic-import)) | `import('./guy').then(a)` |
| `numericSeparator` ([proposal](https://github.com/samuelgoto/proposal-numeric-separator)) | `1_000_000` |
| `optionalChaining` ([proposal](https://github.com/tc39/proposal-optional-chaining)) | `a?.b` |
| `importMeta` ([proposal](https://github.com/tc39/proposal-import-meta)) | `import.meta.url` |
| `bigInt` ([proposal](https://github.com/tc39/proposal-bigint)) | `100n` |
| `optionalCatchBinding` ([proposal](https://github.com/babel/proposals/issues/7)) | `try {throw 0;} catch{do();}` |
| `throwExpressions` ([proposal](https://github.com/babel/proposals/issues/23)) | `() => throw new Error("")` |
| `pipelineOperator` ([proposal](https://github.com/babel/proposals/issues/29)) | `a \|> b` |
| `nullishCoalescingOperator` ([proposal](https://github.com/babel/proposals/issues/14)) | `a ?? b` |
#### Plugins options
> NOTE: When a plugin is specified multiple times, only the first options are considered.
- `decorators`:
- `decoratorsBeforeExport` (`boolean`)
```js
// decoratorsBeforeExport: true
@dec
export class C {}
// decoratorsBeforeExport: false
export @dec class C {}
```
- `flow`:
- `all` (`boolean`)
<!-- TODO -->
### FAQ
#### Will the Babel parser support a plugin system?
Previous issues: [#1351](https://github.com/babel/babel/issues/1351), [#6694](https://github.com/babel/babel/issues/6694).
We currently aren't willing to commit to supporting the API for plugins or the resulting ecosystem (there is already enough work maintaining Babel's own plugin system). It's not clear how to make that API effective, and it would limit our ability to refactor and optimize the codebase.
Our current recommendation for those that want to create their own custom syntax is for users to fork the parser.
To consume your custom parser, you can add to your `.babelrc` via its npm package name or require it if using JavaScript,
```json
{
"parserOpts": {
"parser": "custom-fork-of-babel-parser-on-npm-here"
}
}
```sh
yarn add --save @babel/parser
```

View File

@ -1,33 +1,19 @@
# @babel/plugin-external-helpers
## Installation
> This plugin contains helper functions thatll be placed at the top of the generated code
See our website [@babel/plugin-external-helpers](https://new.babeljs.io/docs/en/next/babel-plugin-external-helpers.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-external-helpers
npm install --save @babel/plugin-external-helpers
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-external-helpers"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-external-helpers script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-external-helpers"]
});
yarn add --save @babel/plugin-external-helpers
```

View File

@ -1,107 +1,19 @@
# @babel/plugin-proposal-async-generator-functions
> Turn async generator functions and for-await statements to ES2015 generators
> Turn async generator functions into ES2015 generators
## Example
See our website [@babel/plugin-proposal-async-generator-functions](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-async-generator-functions.html) for more information.
**In**
## Install
```javascript
async function* agf() {
await 1;
yield 2;
}
```
**Out**
```javascript
var _asyncGenerator = ...
let agf = (() => {
var _ref = _asyncGenerator.wrap(function* () {
yield _asyncGenerator.await(1);
yield 2;
});
return function agf() {
return _ref.apply(this, arguments);
};
})();
```
For await example
```js
async function f() {
for await (let x of y) {
g(x);
}
}
```
**Example Usage**
```js
async function* genAnswers() {
var stream = [ Promise.resolve(4), Promise.resolve(9), Promise.resolve(12) ];
var total = 0;
for await (let val of stream) {
total += await val;
yield total;
}
}
function forEach(ai, fn) {
return ai.next().then(function (r) {
if (!r.done) {
fn(r);
return forEach(ai, fn);
}
});
}
var output = 0;
forEach(genAnswers(), function(val) { output += val.value })
.then(function () {
console.log(output); // 42
});
```
[Try it Out in the REPL](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=stage-3&code=async%20function*%20genAnswers()%20%7B%0A%20%20var%20stream%20%3D%20%5B%20Promise.resolve(4)%2C%20Promise.resolve(9)%2C%20Promise.resolve(12)%20%5D%3B%0A%20%20var%20total%20%3D%200%3B%0A%20%20for%20await%20(let%20val%20of%20stream)%20%7B%0A%20%20%20%20total%20%2B%3D%20await%20val%3B%0A%20%20%20%20yield%20total%3B%0A%20%20%7D%0A%7D%0A%0Afunction%20forEach(ai%2C%20fn)%20%7B%0A%20%20return%20ai.next().then(function%20(r)%20%7B%0A%20%20%20%20if%20(!r.done)%20%7B%0A%20%20%20%20%20%20fn(r)%3B%0A%20%20%20%20%20%20return%20forEach(ai%2C%20fn)%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%0A%7D%0A%0Avar%20output%20%3D%200%3B%0AforEach(genAnswers()%2C%20function(val)%20%7B%20output%20%2B%3D%20val.value%20%7D)%0A.then(function%20()%20%7B%0A%20%20console.log(output)%3B%20%2F%2F%2042%0A%7D)%3B&experimental=true&loose=false&spec=false&playground=true&stage=0)
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-async-generator-functions
npm install --save @babel/plugin-proposal-async-generator-functions
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-async-generator-functions"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-async-generator-functions script.js
yarn add --save @babel/plugin-proposal-async-generator-functions
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-async-generator-functions"]
});
```
## References
* [Proposal: Asynchronous iteration for ECMAScript](https://github.com/tc39/proposal-async-iteration)

View File

@ -1,149 +1,19 @@
# @babel/plugin-proposal-class-properties
> This plugin transforms class properties
> This plugin transforms static class properties as well as properties declared with the property initializer syntax
## Example
See our website [@babel/plugin-proposal-class-properties](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-class-properties.html) for more information.
Below is a class with four class properties which will be transformed.
## Install
```js
class Bork {
//Property initializer syntax
instanceProperty = "bork";
boundFunction = () => {
return this.instanceProperty;
};
//Static class properties
static staticProperty = "babelIsCool";
static staticFunction = function() {
return Bork.staticProperty;
};
}
let myBork = new Bork;
//Property initializers are not on the prototype.
console.log(myBork.__proto__.boundFunction); // > undefined
//Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); // > "bork"
//Static function exists on the class.
console.log(Bork.staticFunction()); // > "babelIsCool"
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-class-properties
npm install --save @babel/plugin-proposal-class-properties
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
Without options:
```json
{
"plugins": ["@babel/plugin-proposal-class-properties"]
}
```
With options:
```json
{
"plugins": [
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-class-properties script.js
yarn add --save @babel/plugin-proposal-class-properties
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-class-properties"]
});
```
## Options
### `loose`
`boolean`, defaults to `false`.
When `true`, class properties are compiled to use an assignment expression instead of `Object.defineProperty`.
#### Example
```js
class Bork {
static a = 'foo';
static b;
x = 'bar';
y;
}
```
Without `{ "loose": true }`, the above code will compile to the following, using `Object.defineProperty`:
```js
var Bork = function Bork() {
babelHelpers.classCallCheck(this, Bork);
Object.defineProperty(this, "x", {
configurable: true,
enumerable: true,
writable: true,
value: 'bar'
});
Object.defineProperty(this, "y", {
configurable: true,
enumerable: true,
writable: true,
value: void 0
});
};
Object.defineProperty(Bork, "a", {
configurable: true,
enumerable: true,
writable: true,
value: 'foo'
});
Object.defineProperty(Bork, "b", {
configurable: true,
enumerable: true,
writable: true,
value: void 0
});
```
However, with `{ "loose": true }`, it will compile using assignment expressions:
```js
var Bork = function Bork() {
babelHelpers.classCallCheck(this, Bork);
this.x = 'bar';
this.y = void 0;
};
Bork.a = 'foo';
Bork.b = void 0;
```
## References
* [Proposal: ES Class Fields & Static Properties](https://github.com/jeffmo/es-class-static-properties-and-fields)

View File

@ -2,142 +2,18 @@
> Compile class and object decorators to ES5
## Example
See our website [@babel/plugin-proposal-decorators](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html) for more information.
(examples are from proposal)
## Install
### Simple class decorator
```js
@annotation
class MyClass { }
function annotation(target) {
target.annotated = true;
}
```
### Class decorator
```js
@isTestable(true)
class MyClass { }
function isTestable(value) {
return function decorator(target) {
target.isTestable = value;
}
}
```
### Class function decorator
```js
class C {
@enumerable(false)
method() { }
}
function enumerable(value) {
return function (target, key, descriptor) {
descriptor.enumerable = value;
return descriptor;
}
}
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-decorators
npm install --save @babel/plugin-proposal-decorators
```
## Usage
Add the following line to your .babelrc file:
```json
{
"plugins": ["@babel/plugin-proposal-decorators"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-decorators script.js
yarn add --save @babel/plugin-proposal-decorators
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-decorators"]
});
```
## Options
### `decoratorsBeforeExport`
`boolean`, defaults to `true`.
```js
// decoratorsBeforeExport: true
@decorator
export class Foo {}
// decoratorsBeforeExport: false
export @decorator class Bar {}
```
This option was added to help tc39 collect feedback from the community by allowing experimentation with both possible syntaxes.
For more information, check out: [tc39/proposal-decorators#69](https://github.com/tc39/proposal-decorators/issues/69).
### `legacy`
`boolean`, defaults to `false`.
Use the legacy (stage 1) decorators syntax and behavior.
#### NOTE: Compatibility with `@babel/plugin-proposal-class-properties`
If you are including your plugins manually and using `@babel/plugin-proposal-class-properties`, make sure that `@babel/plugin-proposal-decorators` comes *before* `@babel/plugin-proposal-class-properties`.
When using the `legacy: true` mode, `@babel/plugin-proposal-class-properties` must be used in `loose` mode to support the `@babel/plugin-proposal-decorators`.
Wrong:
```json
{
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-decorators"
]
}
```
Right:
```json
{
"plugins": [
"@babel/plugin-proposal-decorators",
"@babel/plugin-proposal-class-properties"
]
}
```
```json
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
```
## References
* [Proposal: JavaScript Decorators](https://github.com/wycats/javascript-decorators/blob/master/README.md)

View File

@ -1,118 +1,19 @@
# @babel/plugin-proposal-do-expressions
> Compile `do` expressions to ES5
> Compile do expressions to ES5
## Detail
See our website [@babel/plugin-proposal-do-expressions](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-do-expressions.html) for more information.
> The `do { .. }` expression executes a block (with one or many statements in it), and the final statement completion value inside the block becomes the completion value of the do expression.
## Install
from [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch5.md#statement-completion-values)
It can be seen as a complex version of the [ternary operator](http://mdn.io/ternary):
```js
let a = do {
if(x > 10) {
'big';
} else {
'small';
}
};
// is equivalent to:
let a = x > 10 ? 'big' : 'small';
```
This example is not the best usage because it is too simple and using a ternary operator is a better option but you can have a much more complex condition in the `do { ... }` expression with several `if ... else` chains:
```js
let x = 100;
let y = 20;
let a = do {
if(x > 10) {
if(y > 20) {
'big x, big y';
} else {
'big x, small y';
}
} else {
if(y > 10) {
'small x, big y';
} else {
'small x, small y';
}
}
};
```
## Example
### In JSX
One of the most useful usage of the `do` expression is inside JSX. If we want to conditionally display a component we usually have to call another function which would implement the condition and return the correct value, for example:
```js
const getColoredComponent = color => {
if(color === 'blue') { return <BlueComponent/>; }
if(color === 'red') { return <RedComponent/>; }
if(color === 'green') { return <GreenComponent/>; }
}
const Component = props =>
<div className='myComponent'>
{getColoredComponent()}
</div>
;
```
Using a do expression you can add logic inside JSX:
```js
const Component = props =>
<div className='myComponent'>
{do {
if(color === 'blue') { <BlueComponent/>; }
else if(color === 'red') { <RedComponent/>; }
else if(color === 'green') { <GreenComponent/>; }
}}
</div>
;
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-do-expressions
npm install --save @babel/plugin-proposal-do-expressions
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-do-expressions"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-do-expressions script.js
yarn add --save @babel/plugin-proposal-do-expressions
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-do-expressions"]
});
```
## References
- [Proposal](https://github.com/tc39/proposal-do-expressions)
- [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch5.md#statement-completion-values)
- Very handy for conditions inside JSX: [reactjs/react-future#35](https://github.com/reactjs/react-future/issues/35#issuecomment-120009203)

View File

@ -1,45 +1,19 @@
# @babel/plugin-proposal-export-default-from
> Compile export-default-from statements to ES2015
> Compile export default to ES2015
## Example
See our website [@babel/plugin-proposal-export-default-from](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-export-default-from.html) for more information.
```js
export v from 'mod';
```
## Install
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-export-default-from
npm install --save @babel/plugin-proposal-export-default-from
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-export-default-from"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-export-default-from script.js
yarn add --save @babel/plugin-proposal-export-default-from
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-export-default-from"]
});
```
## References
* ~~[Proposal: Additional export-from statements in ES7](https://github.com/leebyron/ecmascript-more-export-from)~~ (Withdrawn)
* [ECMAScript Proposal: export default from](https://github.com/leebyron/ecmascript-export-default-from)

View File

@ -1,45 +1,19 @@
# @babel/plugin-proposal-export-namespace-from
> Compile export-ns-from statements to ES2015
> Compile export namespace to ES2015
## Example
See our website [@babel/plugin-proposal-export-namespace-from](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-export-namespace-from.html) for more information.
```js
export * as ns from 'mod';
```
## Install
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-export-namespace-from
npm install --save @babel/plugin-proposal-export-namespace-from
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-export-namespace-from"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-export-namespace-from script.js
yarn add --save @babel/plugin-proposal-export-namespace-from
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-export-namespace-from"]
});
```
## References
* ~~[Proposal: Additional export-from statements in ES7](https://github.com/leebyron/ecmascript-more-export-from)~~ (Withdrawn)
* [ECMAScript Proposal: export ns from](https://github.com/leebyron/ecmascript-export-ns-from)

View File

@ -1,121 +1,19 @@
# @babel/plugin-proposal-function-bind
> Compile the new function bind operator `::` to ES5.
> Compile function bind operator to ES5
## Detail
See our website [@babel/plugin-proposal-function-bind](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-function-bind.html) for more information.
```js
obj::func
// is equivalent to:
func.bind(obj)
## Install
::obj.func
// is equivalent to:
obj.func.bind(obj)
obj::func(val)
// is equivalent to:
func.call(obj, val)
::obj.func(val)
// is equivalent to:
obj.func.call(obj, val)
```
## Example
### Basic
```js
const box = {
weight: 2,
getWeight() { return this.weight; },
};
const { getWeight } = box;
console.log(box.getWeight()); // prints '2'
const bigBox = { weight: 10 };
console.log(bigBox::getWeight()); // prints '10'
// Can be chained:
function add(val) { return this + val; }
console.log(bigBox::getWeight()::add(5)); // prints '15'
```
### Using with `document.querySelectorAll`
It can be very handy when used with `document.querySelectorAll`:
```js
const { map, filter } = Array.prototype;
let sslUrls = document.querySelectorAll('a')
::map(node => node.href)
::filter(href => href.substring(0, 5) === 'https');
console.log(sslUrls);
```
`document.querySelectorAll` returns a `NodeList` element which is not a plain array, so you normally can't use the `map` function on it, and have to use it this way: `Array.prototype.map.call(document.querySelectorAll(...), node => { ... })`. The above code using the `::` will work because it is equivalent to:
```js
const { map, filter } = Array.prototype;
let sslUrls = document.querySelectorAll('a');
sslUrls = map.call(sslUrls, node => node.href);
sslUrls = filter.call(sslUrls, href => href.substring(0, 5) === 'https');
console.log(sslUrls);
```
### Auto self binding
When nothing is specified before the `::` operator, the function is bound to its object:
```js
$('.some-link').on('click', ::view.reset);
// is equivalent to:
$('.some-link').on('click', view.reset.bind(view));
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-function-bind
npm install --save @babel/plugin-proposal-function-bind
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-function-bind"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-function-bind script.js
yarn add --save @babel/plugin-proposal-function-bind
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-function-bind"]
});
```
## References
* [Proposal](https://github.com/zenparsing/es-function-bind)
* [Babel Blog: Function Bind Syntax](/blog/2015/05/14/function-bind)

View File

@ -1,66 +1,19 @@
# @babel/plugin-proposal-function-sent
> Compile the `function.sent` meta property, used inside generator functions, to valid ES2015 code.
> Compile the function.sent meta propety to valid ES2015 code
## Example
See our website [@babel/plugin-proposal-function-sent](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-function-sent.html) for more information.
```js
function* generator() {
console.log("Sent", function.sent);
console.log("Yield", yield);
}
## Install
const iterator = generator();
iterator.next(1); // Logs "Sent 1"
iterator.next(2); // Logs "Yield 2"
```
Is compiled roughly to
```js
let generator = _skipFirstGeneratorNext(function* () {
const _functionSent = yield;
console.log("Sent", _functionSent);
console.log("Yield", yield);
});
const iterator = generator();
iterator.next(1); // Logs "Sent 1"
iterator.next(2); // Logs "Yield 1"
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-function-sent
npm install --save @babel/plugin-proposal-function-sent
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-function-sent"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-function-sent script.js
yarn add --save @babel/plugin-proposal-function-sent
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-function-sent"]
});
```
## References
* [Proposal](https://github.com/allenwb/ESideas/blob/master/Generator%20metaproperty.md)

View File

@ -1,54 +1,19 @@
# @babel/plugin-syntax-json-strings
# @babel/plugin-proposal-json-strings
Allow parsing of the U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR in JS strings
> Escape U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR in JS strings
## Examples
See our website [@babel/plugin-proposal-json-strings](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-json-strings.html) for more information.
**In**
## Install
```js
const ex = "beforeafter";
// ^ There's a U+2028 char between 'before' and 'after'
```
**Out**
```js
const ex = "before\u2028after";
// ^ There's a U+2028 char between 'before' and 'after'
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-json-strings
npm install --save @babel/plugin-proposal-json-strings
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-json-strings"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-json-strings script.js
yarn add --save @babel/plugin-proposal-json-strings
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-json-strings"]
});
```
## References
- [Proposal: Optional Catch Binding for ECMAScript](https://github.com/babel/proposals/issues/7)

View File

@ -1,63 +1,19 @@
# @babel/plugin-proposal-logical-assignment-operator
# @babel/plugin-proposal-logical-assignment-operators
> Transforms logical assignment operators into short-circuited assignments
## Example
See our website [@babel/plugin-proposal-logical-assignment-operators](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-logical-assignment-operators.html) for more information.
**In**
## Install
```javascript
a ||= b;
obj.a.b ||= c;
a &&= b;
obj.a.b &&= c;
```
**Out**
```javascript
var _obj$a, _obj$a2;
a || (a = b);
(_obj$a = obj.a).b || (_obj$a.b = c);
a && (a = b);
(_obj$a2 = obj.a).b && (_obj$a2.b = c);
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-logical-assignment-operators
npm install --save @babel/plugin-proposal-logical-assignment-operators
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-logical-assignment-operators script.js
yarn add --save @babel/plugin-proposal-logical-assignment-operators
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-logical-assignment-operators"]
});
```
## References
* [Proposal: Logical Assignment Operators](https://github.com/jridgewell/proposal-logical-assignment-operators)

View File

@ -1,84 +1,19 @@
# @babel/plugin-proposal-nullish-coalescing-operator
> Replace `??` with an inline helper.
> Remove nullish coalescing operator
## Example
See our website [@babel/plugin-proposal-nullish-coalescing-operator](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-nullish-coalescing-operator.html) for more information.
**In**
## Install
```javascript
var foo = object.foo ?? "default";
```
**Out**
```javascript
var _object$foo;
var foo = (_object$foo = object.foo) !== null && _object$foo !== void 0 ? _object$foo : "default";
```
> **NOTE:** We cannot use `!= null` here because `document.all == null` and
> `document.all` has been deemed not "nullish".
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator
npm install --save @babel/plugin-proposal-nullish-coalescing-operator
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-nullish-coalescing-operator script.js
yarn add --save @babel/plugin-proposal-nullish-coalescing-operator
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-nullish-coalescing-operator"]
});
```
## Options
### `loose`
`boolean`, defaults to `false`.
When `true`, this transform will pretend `document.all` does not exist,
and perform loose equality checks with `null` instead of strict equality checks
against both `null` and `undefined`.
#### Example
**In**
```javascript
var foo = object.foo ?? "default";
```
**Out**
```javascript
var _object$foo;
var foo = (_object$foo = object.foo) != null ? _object$foo : "default";
```
## References
* [Proposal: Nullish Coalescing](https://github.com/tc39-transfer/proposal-nullish-coalescing)

View File

@ -1,114 +1,19 @@
# @babel/plugin-proposal-numeric-separator
> This plugin allows Babel to transform Decimal, Binary, Hex and Octal literals containing Numeric Literal Separator to their non-separated form.
> Remove numeric separators from Decimal, Binary, Hex and Octal literals
## Example
See our website [@babel/plugin-proposal-numeric-separator](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-numeric-separator.html) for more information.
### Decimal Literals
## Install
```js
let budget = 1_000_000_000_000;
// What is the value of `budget`? It's 1 trillion!
//
// Let's confirm:
console.log(budget === 10 ** 12); // true
```
### Binary Literals
```js
let nibbles = 0b1010_0001_1000_0101;
// Is bit 7 on? It sure is!
// 0b1010_0001_1000_0101
// ^
//
// We can double check:
console.log(!!(nibbles & (1 << 7))); // true
```
### Hex Literal
```js
// Messages are sent as 24 bit values, but should be
// treated as 3 distinct bytes:
let message = 0xA0_B0_C0;
// What's the value of the upper most byte? It's A0, or 160.
// We can confirm that:
let a = (message >> 16) & 0xFF;
console.log(a.toString(16), a); // a0, 160
// What's the value of the middle byte? It's B0, or 176.
// Let's just make sure...
let b = (message >> 8) & 0xFF;
console.log(b.toString(16), b); // b0, 176
// What's the value of the lower most byte? It's C0, or 192.
// Again, let's prove that:
let c = message & 0xFF;
console.log(c.toString(16), b); // c0, 192
```
### Octal Literal
*hand wave emoji*
Octals are great for permissions, but also look better when represented in `0o0000` form. No real benefit with separators here.
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-numeric-separator
npm install --save @babel/plugin-proposal-numeric-separator
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-numeric-separator"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-numeric-separator script.js
yarn add --save @babel/plugin-proposal-numeric-separator
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-numeric-separator"]
});
```
## Additional Information
If you need to further compile ES2015 Decimal, Binary, Hex and Octal number representations to their pre-ES2015 numeric literal form, add the [`"@babel/plugin-transform-literals"`](http://babeljs.io/docs/plugins/transform-literals/) plugin:
> `@babel/plugin-transform-literals` is already included in [@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env) and @babel/preset-es2015.
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-numeric-separator"]
}
{
"plugins": ["@babel/plugin-proposal-numeric-separator", "@babel/plugin-transform-literals"]
}
```
## References
* [Proposal: Numeric Separators](https://github.com/samuelgoto/proposal-numeric-separator)

View File

@ -1,105 +1,19 @@
# @babel/plugin-proposal-object-rest-spread
> This plugin allows Babel to transform rest properties for object destructuring assignment and spread properties for object literals.
> Compile object rest and spread to ES5
## Example
See our website [@babel/plugin-proposal-object-rest-spread](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-object-rest-spread.html) for more information.
### Rest Properties
## Install
```js
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
```
### Spread Properties
```js
let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-object-rest-spread
npm install --save @babel/plugin-proposal-object-rest-spread
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-object-rest-spread script.js
yarn add --save @babel/plugin-proposal-object-rest-spread
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-object-rest-spread"]
});
```
## Options
By default, this plugin will produce spec compliant code by using Babel's `objectSpread` helper.
### `loose`
`boolean`, defaults to `false`.
Enabling this option will use Babel's `extends` helper, which is basically the same as `Object.assign` (see `useBuiltIns` below to use it directly).
:warning: Please keep in mind that even if they're almost equivalent, there's an important difference between spread and `Object.assign`: **spread _defines_ new properties, while `Object.assign()` _sets_ them**, so using this mode might produce unexpected results in some cases.
For detailed information please check out [Spread VS. Object.assign](http://2ality.com/2016/10/rest-spread-properties.html#spreading-objects-versus-objectassign) and [Assigning VS. defining properties](http://exploringjs.com/es6/ch_oop-besides-classes.html#sec_assigning-vs-defining-properties).
### `useBuiltIns`
`boolean`, defaults to `false`.
Enabling this option will use `Object.assign` directly instead of the Babel's `extends` helper.
##### Example
**.babelrc**
```json
{
"plugins": [
["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }]
]
}
```
**In**
```js
z = { x, ...y };
```
**Out**
```js
z = Object.assign({ x }, y);
```
## References
* [Proposal: Object Rest/Spread Properties for ECMAScript](https://github.com/sebmarkbage/ecmascript-rest-spread)
* [Spec](http://sebmarkbage.github.io/ecmascript-rest-spread)
* [Spread VS. Object.assign](http://2ality.com/2016/10/rest-spread-properties.html#spreading-objects-versus-objectassign)
* [Assigning VS. defining properties](http://exploringjs.com/es6/ch_oop-besides-classes.html#sec_assigning-vs-defining-properties)

View File

@ -1,60 +1,19 @@
# @babel/plugin-proposal-optional-catch-binding
> Optional catch binding enables the catch block to execute whether or not an argument is passed to the catch statement (CatchClause).
> Compile optional catch bindings
See our website [@babel/plugin-proposal-optional-catch-binding](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-optional-catch-binding.html) for more information.
## Examples
## Install
```js
try {
throw 0;
} catch {
doSomethingWhichDoesntCareAboutTheValueThrown();
}
```
```js
try {
throw 0;
} catch {
doSomethingWhichDoesntCareAboutTheValueThrown();
} finally {
doSomeCleanup();
}
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-optional-catch-binding
npm install --save @babel/plugin-proposal-optional-catch-binding
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-optional-catch-binding"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-optional-catch-binding script.js
yarn add --save @babel/plugin-proposal-optional-catch-binding
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-optional-catch-binding"]
});
```
## References
- [Proposal: Optional Catch Binding for ECMAScript](https://github.com/babel/proposals/issues/7)

View File

@ -1,148 +1,19 @@
# @babel/plugin-proposal-optional-chaining
The Optional Chaining Operator allows you to handle properties of deeply nested
objects without worrying about undefined intermediate objects.
> Transform optional chaining operators into a series of nil checks
## Example
See our website [@babel/plugin-proposal-optional-chaining](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html) for more information.
### Accessing deeply nested properties
## Install
```js
const obj = {
foo: {
bar: {
baz: 42,
},
},
};
const baz = obj?.foo?.bar?.baz; // 42
const safe = obj?.qux?.baz; // undefined
// Optional chaining and normal chaining can be intermixed
obj?.foo.bar?.baz; // Only access `foo` if `obj` exists, and `baz` if
// `bar` exists
```
### Calling deeply nested functions
```js
const obj = {
foo: {
bar: {
baz() {
return 42;
},
},
},
};
const baz = obj?.foo?.bar?.baz(); // 42
const safe = obj?.qux?.baz(); // undefined
const safe2 = obj?.foo.bar.qux?.(); // undefined
const willThrow = obj?.foo.bar.qux(); // Error: not a function
// Top function can be called directly, too.
function test() {
return 42;
}
test?.(); // 42
exists?.(); // undefined
```
### Constructing deeply nested classes
```js
const obj = {
foo: {
bar: {
baz: class {
},
},
},
};
const baz = new obj?.foo?.bar?.baz(); // baz instance
const safe = new obj?.qux?.baz(); // undefined
const safe2 = new obj?.foo.bar.qux?.(); // undefined
const willThrow = new obj?.foo.bar.qux(); // Error: not a constructor
// Top classes can be called directly, too.
class Test {
}
new Test?.(); // test instance
new exists?.(); // undefined
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-optional-chaining
npm install --save @babel/plugin-proposal-optional-chaining
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-optional-chaining"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-optional-chaining script.js
yarn add --save @babel/plugin-proposal-optional-chaining
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-optional-chaining"]
});
```
## Options
### `loose`
`boolean`, defaults to `false`.
When `true`, this transform will pretend `document.all` does not exist,
and perform loose equality checks with `null` instead of string equality checks
against both `null` and `undefined`.
#### Example
In
```javascript
foo?.bar;
```
Out (`loose === true`)
```javascript
foo == null ? void 0 : foo.bar;
```
Out (`loose === false`)
```javascript
foo === null || foo === void 0 ? void 0 : foo.bar;
```
## References
* [Proposal: Optional Chaining](https://github.com/tc39/proposal-optional-chaining)

View File

@ -1,35 +1,19 @@
# @babel/plugin-proposal-pipeline-operator
Transform pipeline operator `|>` into call expressions. See [the proposal](https://github.com/tc39/proposal-pipeline-operator) for details.
> Transform pipeline operator into call expressions
## Installation
See our website [@babel/plugin-proposal-pipeline-operator](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-pipeline-operator.html) for more information.
## Install
Using npm:
```sh
$ npm install @babel/plugin-proposal-pipeline-operator
npm install --save @babel/plugin-proposal-pipeline-operator
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-pipeline-operator"]
}
```
### Via CLI
or using yarn:
```sh
$ babel --plugins @babel/plugin-proposal-pipeline-operator script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-pipeline-operator"]
});
yarn add --save @babel/plugin-proposal-pipeline-operator
```

View File

@ -1,47 +1,19 @@
# @babel/plugin-proposal-throw-expressions
This plugin transforms Throw Expressions into an IIFE.
> Wraps Throw Expressions in an IIFE
## Example
See our website [@babel/plugin-proposal-throw-expressions](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-throw-expressions.html) for more information.
```js
function test(param = throw new Error('required!')) {
const test = param === true || throw new Error('Falsey!');
}
```
## Install
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-throw-expressions
npm install --save @babel/plugin-proposal-throw-expressions
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-proposal-throw-expressions"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-proposal-throw-expressions script.js
yarn add --save @babel/plugin-proposal-throw-expressions
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-throw-expressions"]
});
```
## References
* [Proposal: ECMAScript throw expressions](https://github.com/tc39/proposal-throw-expressions)

View File

@ -1,60 +1,19 @@
# @babel/plugin-proposal-unicode-property-regex
Compile [Unicode property escapes](https://github.com/mathiasbynens/regexpu-core/blob/master/property-escapes.md) (`\p{…}` and `\P{…}`) in Unicode regular expressions to ES5 or ES6 that works in todays environments.
> Compile Unicode property escapes in Unicode regular expressions to ES5.
[Heres an online demo.](https://mothereff.in/regexpu#input=var+regex+%3D+/%5Cp%7BScript_Extensions%3DGreek%7D/u%3B&unicodePropertyEscape=1)
See our website [@babel/plugin-proposal-unicode-property-regex](https://new.babeljs.io/docs/en/next/babel-plugin-proposal-unicode-property-regex.html) for more information.
## Installation
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-proposal-unicode-property-regex
npm install --save @babel/plugin-proposal-unicode-property-regex
```
## Usage
### Via `.babelrc` (recommended)
`.babelrc`
```json
{
"plugins": ["@babel/plugin-proposal-unicode-property-regex"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/@babel/plugin-proposal-unicode-property-regex script.js
yarn add --save @babel/plugin-proposal-unicode-property-regex
```
### Via Node.js API
```js
require("@babel/core").transform(code, {
"plugins": ["@babel/plugin-proposal-unicode-property-regex"]
});
```
To transpile to ES6/ES2015:
```js
require("@babel/core").transform(code, {
"plugins": [
["@babel/plugin-proposal-unicode-property-regex", { "useUnicodeFlag": false }]
]
});
```
## Options
* `useUnicodeFlag` (defaults to `true`)
When disabled with `false`, the transform converts Unicode regexes to
non-Unicode regexes for wider support, removing the `u` flag. See https://github.com/mathiasbynens/regexpu-core#useunicodeflag-default-false for more information.
## Author
| [![twitter/mathias](https://gravatar.com/avatar/24e08a9ea84deb17ae121074d0f17125?s=70)](https://twitter.com/mathias "Follow @mathias on Twitter") |
|---|
| [Mathias Bynens](https://mathiasbynens.be/) |

View File

@ -1,57 +1,19 @@
# @babel/plugin-syntax-async-generators
> Allow parsing of async generator functions.
> Allow parsing of async generator functions
## Example
See our website [@babel/plugin-syntax-async-generators](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-async-generators.html) for more information.
**Syntax**
## Install
```javascript
async function* agf() {
await 1;
}
```
```js
async function f() {
for await (let x of y) {
g(x);
}
}
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-async-generators
npm install --save @babel/plugin-syntax-async-generators
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-async-generators"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-async-generators script.js
yarn add --save @babel/plugin-syntax-async-generators
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-async-generators"]
});
```
## References
* [Proposal: Asynchronous iteration for ECMAScript](https://github.com/tc39/proposal-async-iteration)

View File

@ -1,36 +1,19 @@
# @babel/plugin-syntax-bigint
> Allow parsing of BigInt literals.
> Allow parsing of BigInt literals
See our website [@babel/plugin-syntax-bigint](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-bigint.html) for more information.
## Installation
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-bigint
npm install --save @babel/plugin-syntax-bigint
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-bigint"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-bigint script.js
```
### Via Node API
```javascript
require("babel-core").transform("code", {
plugins: ["@babel/plugin-syntax-bigint"]
});
yarn add --save @babel/plugin-syntax-bigint
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-class-properties
> Allow parsing of class properties.
> Allow parsing of class properties
## Installation
See our website [@babel/plugin-syntax-class-properties](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-class-properties.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-class-properties
npm install --save @babel/plugin-syntax-class-properties
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-class-properties"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-class-properties script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-class-properties"]
});
yarn add --save @babel/plugin-syntax-class-properties
```

View File

@ -1,60 +1,19 @@
# @babel/plugin-syntax-decorators
> Allow parsing of decorators.
> Allow parsing of decorators
## Installation
See our website [@babel/plugin-syntax-decorators](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-decorators.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-decorators
npm install --save @babel/plugin-syntax-decorators
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-decorators"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-decorators script.js
yarn add --save @babel/plugin-syntax-decorators
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-decorators"]
});
```
## Options
### `legacy`
`boolean`, defaults to `false`.
Use the legacy (stage 1) decorators syntax.
### `decoratorsBeforeExport`
`boolean`, defaults to `true`.
```js
// decoratorsBeforeExport: true
@decorator
export class Foo {}
// decoratorsBeforeExport: false
export @decorator class Bar {}
```
This option was added to help tc39 collect feedback from the community by allowing experimentation with both possible syntaxes.
For more information, check out: [tc39/proposal-decorators#69](https://github.com/tc39/proposal-decorators/issues/69)

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-do-expressions
> Allow parsing of do expressions.
> Allow parsing of do expressions
## Installation
See our website [@babel/plugin-syntax-do-expressions](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-do-expressions.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-do-expressions
npm install --save @babel/plugin-syntax-do-expressions
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-do-expressions"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-do-expressions script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-do-expressions"]
});
yarn add --save @babel/plugin-syntax-do-expressions
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-dynamic-import
> Allow parsing of `import()`.
> Allow parsing of import()
## Installation
See our website [@babel/plugin-syntax-dynamic-import](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-dynamic-import.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-dynamic-import
npm install --save @babel/plugin-syntax-dynamic-import
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-dynamic-import script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-dynamic-import"]
});
yarn add --save @babel/plugin-syntax-dynamic-import
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-export-default-from
> Allow parsing of `export default from`.
> Allow parsing of export default from
## Installation
See our website [@babel/plugin-syntax-export-default-from](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-export-default-from.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-export-default-from
npm install --save @babel/plugin-syntax-export-default-from
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-export-default-from"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-export-default-from script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-export-default-from"]
});
yarn add --save @babel/plugin-syntax-export-default-from
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-export-namespace-from
> Allow parsing of `export * as namespace from`.
> Allow parsing of export namespace from
## Installation
See our website [@babel/plugin-syntax-export-namespace-from](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-export-namespace-from.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-export-namespace-from
npm install --save @babel/plugin-syntax-export-namespace-from
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-export-namespace-from"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-export-namespace-from script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-export-namespace-from"]
});
yarn add --save @babel/plugin-syntax-export-namespace-from
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-flow
> Allow parsing of the flow syntax
See our website [@babel/plugin-syntax-flow](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-flow.html) for more information.
## Installation
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-flow
npm install --save @babel/plugin-syntax-flow
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-flow"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-flow script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-flow"]
});
yarn add --save @babel/plugin-syntax-flow
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-function-bind
> Allow parsing of function bind.
> Allow parsing of function bind
## Installation
See our website [@babel/plugin-syntax-function-bind](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-function-bind.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-function-bind
npm install --save @babel/plugin-syntax-function-bind
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-function-bind"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-function-bind script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-function-bind"]
});
yarn add --save @babel/plugin-syntax-function-bind
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-function-sent
> Allow parsing of the `function.sent` meta property.
> Allow parsing of the function.sent meta property
## Installation
See our website [@babel/plugin-syntax-function-sent](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-function-sent.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-function-sent
npm install --save @babel/plugin-syntax-function-sent
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-function-sent"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-function-sent script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-function-sent"]
});
yarn add --save @babel/plugin-syntax-function-sent
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-import-meta
> Allow parsing of `import.meta`.
> Allow parsing of import.meta
## Installation
See our website [@babel/plugin-syntax-import-meta](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-import-meta.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-import-meta
npm install --save @babel/plugin-syntax-import-meta
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-import-meta"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-import-meta script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-import-meta"]
});
yarn add --save @babel/plugin-syntax-import-meta
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-json-strings
Allow parsing of the U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR in JS strings
> Allow parsing of the U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR in JS strings
## Installation
See our website [@babel/plugin-syntax-json-strings](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-json-strings.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-json-strings
npm install --save @babel/plugin-syntax-json-strings
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-json-strings"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-json-strings script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-json-strings"]
});
yarn add --save @babel/plugin-syntax-json-strings
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-jsx
> Allow parsing of JSX
> Allow parsing of jsx
## Installation
See our website [@babel/plugin-syntax-jsx](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-jsx.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-jsx
npm install --save @babel/plugin-syntax-jsx
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-jsx"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-jsx script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-jsx"]
});
yarn add --save @babel/plugin-syntax-jsx
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-logical-assignment-operators
> Allow parsing of the logical assignment operators.
> Allow parsing of the logical assignment operators
## Installation
See our website [@babel/plugin-syntax-logical-assignment-operators](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-logical-assignment-operators.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-logical-assignment-operators
npm install --save @babel/plugin-syntax-logical-assignment-operators
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-logical-assignment-operators"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-logical-assignment-operators script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-logical-assignment-operators"]
});
yarn add --save @babel/plugin-syntax-logical-assignment-operators
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-nullish-coalescing-operator
> Allow parsing of the nullish-coalescing operator.
> Allow parsing of the nullish-coalescing operator
## Installation
See our website [@babel/plugin-syntax-nullish-coalescing-operator](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-nullish-coalescing-operator.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-nullish-coalescing-operator
npm install --save @babel/plugin-syntax-nullish-coalescing-operator
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-nullish-coalescing-operator"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-nullish-coalescing-operator script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-nullish-coalescing-operator"]
});
yarn add --save @babel/plugin-syntax-nullish-coalescing-operator
```

View File

@ -1,36 +1,19 @@
# @babel/plugin-syntax-numeric-separator
> Allow parsing of Numeric Literals (Decimal, Binary, Hex and Octal) that contain a _NumericLiteralSeparator_.
> Allow parsing of Decimal, Binary, Hex and Octal literals that contain a Numeric Literal Separator
See our website [@babel/plugin-syntax-numeric-separator](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-numeric-separator.html) for more information.
## Installation
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-numeric-separator
npm install --save @babel/plugin-syntax-numeric-separator
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-numeric-separator"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-numeric-separator script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-numeric-separator"]
});
yarn add --save @babel/plugin-syntax-numeric-separator
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-object-rest-spread
> Allow parsing of object rest/spread.
> Allow parsing of object rest/spread
## Installation
See our website [@babel/plugin-syntax-object-rest-spread](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-object-rest-spread.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-object-rest-spread
npm install --save @babel/plugin-syntax-object-rest-spread
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-object-rest-spread"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-object-rest-spread script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-object-rest-spread"]
});
yarn add --save @babel/plugin-syntax-object-rest-spread
```

View File

@ -1,52 +1,19 @@
# @babel/plugin-syntax-optional-catch-binding
> This plugin allows Babel to parse optional catch bindings.
> Allow parsing of optional catch bindings
## Example
See our website [@babel/plugin-syntax-optional-catch-binding](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-optional-catch-binding.html) for more information.
**Syntax**
## Install
```javascript
try {
throw 0;
} catch {
doSomethingWhichDoesntCareAboutTheValueThrown();
console.log("Yay, code executes!");
}
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-optional-catch-binding
npm install --save @babel/plugin-syntax-optional-catch-binding
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-optional-catch-binding"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-optional-catch-binding script.js
yarn add --save @babel/plugin-syntax-optional-catch-binding
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-optional-catch-binding"]
});
```
## References
* [Proposal: Optional Catch Binding for ECMAScript](https://github.com/babel/proposals/issues/7)

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-optional-chaining
Allow parsing of optional properties.
> Allow parsing of optional properties
## Installation
See our website [@babel/plugin-syntax-optional-chaining](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-optional-chaining.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-optional-chaining
npm install --save @babel/plugin-syntax-optional-chaining
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-optional-chaining"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-optional-chaining script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-optional-chaining"]
});
yarn add --save @babel/plugin-syntax-optional-chaining
```

View File

@ -1,35 +1,19 @@
# @babel/plugin-syntax-pipeline-operator
Allow parsing of the pipeline operator `|>`. See [the proposal](https://github.com/tc39/proposal-pipeline-operator) for details.
> Allow parsing of the pipeline operator
## Installation
See our website [@babel/plugin-syntax-pipeline-operator](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-pipeline-operator.html) for more information.
## Install
Using npm:
```sh
$ npm install @babel/plugin-syntax-pipeline-operator
npm install --save @babel/plugin-syntax-pipeline-operator
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-pipeline-operator"]
}
```
### Via CLI
or using yarn:
```sh
$ babel --plugins @babel/plugin-syntax-pipeline-operator script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-pipeline-operator"]
});
yarn add --save @babel/plugin-syntax-pipeline-operator
```

View File

@ -1,42 +1,19 @@
# @babel/plugin-syntax-throw-expressions
Allow parsing of Throw Expressions:
> Allow parsing of Throw Expressions
```js
function test(param = throw new Error('required!')) {
const test = param === true || throw new Error('Falsey!');
}
```
See our website [@babel/plugin-syntax-throw-expressions](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-throw-expressions.html) for more information.
## Install
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-throw-expressions
npm install --save @babel/plugin-syntax-throw-expressions
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-throw-expressions"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-throw-expressions script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-throw-expressions"]
});
yarn add --save @babel/plugin-syntax-throw-expressions
```

View File

@ -1,33 +1,19 @@
# @babel/plugin-syntax-typescript
## Installation
> Allow parsing of TypeScript syntax
See our website [@babel/plugin-syntax-typescript](https://new.babeljs.io/docs/en/next/babel-plugin-syntax-typescript.html) for more information.
## Install
Using npm:
```sh
npm install --save-dev @babel/plugin-syntax-typescript
npm install --save @babel/plugin-syntax-typescript
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-syntax-typescript"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-syntax-typescript script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-typescript"]
});
yarn add --save @babel/plugin-syntax-typescript
```

View File

@ -2,148 +2,18 @@
> Compile ES2015 arrow functions to ES5
## Example
See our website [@babel/plugin-transform-arrow-functions](https://new.babeljs.io/docs/en/next/babel-plugin-transform-arrow-functions.html) for more information.
**In**
## Install
```javascript
var a = () => {};
var a = (b) => b;
const double = [1,2,3].map((num) => num * 2);
console.log(double); // [2,4,6]
var bob = {
_name: "Bob",
_friends: ["Sally", "Tom"],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
};
console.log(bob.printFriends());
```
**Out**
```javascript
var a = function () {};
var a = function (b) {
return b;
};
const double = [1, 2, 3].map(function (num) {
return num * 2;
});
console.log(double); // [2,4,6]
var bob = {
_name: "Bob",
_friends: ["Sally", "Tom"],
printFriends() {
var _this = this;
this._friends.forEach(function (f) {
return console.log(_this._name + " knows " + f);
});
}
};
console.log(bob.printFriends());
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-arrow-functions
npm install --save @babel/plugin-transform-arrow-functions
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
Without options:
```json
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}
```
With options:
```json
{
"plugins": [
["@babel/plugin-transform-arrow-functions", { "spec": true }]
]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-arrow-functions script.js
yarn add --save @babel/plugin-transform-arrow-functions
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-arrow-functions"]
});
```
## Options
### `spec`
`boolean`, defaults to `false`.
<p><details>
<summary><b>Example</b></summary>
Using spec mode with the above example produces:
```js
var _this = this;
var a = function a() {
babelHelpers.newArrowCheck(this, _this);
}.bind(this);
var a = function a(b) {
babelHelpers.newArrowCheck(this, _this);
return b;
}.bind(this);
const double = [1, 2, 3].map(function (num) {
babelHelpers.newArrowCheck(this, _this);
return num * 2;
}.bind(this));
console.log(double); // [2,4,6]
var bob = {
_name: "Bob",
_friends: ["Sally", "Tom"],
printFriends() {
var _this2 = this;
this._friends.forEach(function (f) {
babelHelpers.newArrowCheck(this, _this2);
return console.log(this._name + " knows " + f);
}.bind(this));
}
};
console.log(bob.printFriends());
```
</details></p>
This option enables the following:
- Wrap the generated function in `.bind(this)` and keeps uses of `this` inside
the function as-is, instead of using a renamed `this`.
- Add a runtime check to ensure the functions are not instantiated.
- Add names to arrow functions.

View File

@ -2,88 +2,18 @@
> Turn async functions into ES2015 generators
> In Babel 7, `transform-async-to-module-method` was merged into this plugin
See our website [@babel/plugin-transform-async-to-generator](https://new.babeljs.io/docs/en/next/babel-plugin-transform-async-to-generator.html) for more information.
## Example
## Install
**In**
```javascript
async function foo() {
await bar();
}
```
**Out**
```javascript
var _asyncToGenerator = function (fn) {
...
};
var foo = _asyncToGenerator(function* () {
yield bar();
});
```
**Out with options**
> Turn async functions into a Bluebird coroutine
```javascript
var Bluebird = require("bluebird");
var foo = Bluebird.coroutine(function* () {
yield bar();
});
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-async-to-generator
npm install --save @babel/plugin-transform-async-to-generator
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
Without options:
```json
{
"plugins": ["@babel/plugin-transform-async-to-generator"]
}
```
With options:
```json
{
"plugins": [
["@babel/plugin-transform-async-to-generator", {
"module": "bluebird",
"method": "coroutine"
}]
]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-async-to-generator script.js
yarn add --save @babel/plugin-transform-async-to-generator
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-async-to-generator"]
});
```
## References
* [Proposal: Async Functions for ECMAScript](https://github.com/tc39/ecmascript-asyncawait)

View File

@ -1,60 +1,19 @@
# @babel/plugin-transform-block-scoped-functions
> Babel plugin to ensure function declarations at the block level are block scoped.
> Babel plugin to ensure function declarations at the block level are block scoped
## Examples
See our website [@babel/plugin-transform-block-scoped-functions](https://new.babeljs.io/docs/en/next/babel-plugin-transform-block-scoped-functions.html) for more information.
**In**
## Install
```javascript
{
function name (n) {
return n;
}
}
name("Steve");
```
**Out**
```javascript
{
let name = function (n) {
return n;
};
}
name("Steve");
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-block-scoped-functions
npm install --save @babel/plugin-transform-block-scoped-functions
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-block-scoped-functions"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-block-scoped-functions script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-block-scoped-functions"]
});
yarn add --save @babel/plugin-transform-block-scoped-functions
```

View File

@ -2,102 +2,18 @@
> Compile ES2015 block scoping (const and let) to ES5
## Examples
See our website [@babel/plugin-transform-block-scoping](https://new.babeljs.io/docs/en/next/babel-plugin-transform-block-scoping.html) for more information.
**In**
## Install
```javascript
{
let a = 3
}
let a = 3
```
**Out**
```javascript
{
var _a = 3;
}
var a = 3;
```
## Constant checks
This plugin also validates all `const` variables.
Reassignment of constants is a runtime error and it will insert the necessary error code for those.
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-block-scoping
npm install --save @babel/plugin-transform-block-scoping
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
Without options:
```json
{
"plugins": ["@babel/plugin-transform-block-scoping"]
}
```
With options:
```json
{
"plugins": [
["@babel/plugin-transform-block-scoping", {
"throwIfClosureRequired": true
}]
]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-block-scoping script.js
yarn add --save @babel/plugin-transform-block-scoping
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-block-scoping"]
});
```
## Options
### `throwIfClosureRequired`
`boolean`, defaults to `false`.
In cases such as the following it's impossible to rewrite let/const without adding an additional function and closure while transforming:
```javascript
for (let i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 1);
}
```
In extremely performance-sensitive code, this can be undesirable. If `"throwIfClosureRequired": true` is set, Babel throws when transforming these patterns instead of automatically adding an additional function.
### `tdz`
`boolean`, defaults to `false`.
By default this plugin will ignore the *temporal dead zone (TDZ)* for block-scoped variables. The following code will **not throw an error when transpiled with Babel, which is not spec compliant**:
```javascript
i
let i;
```
If you need these errors you can tell Babel to try and find them by setting `"tdz": true` for this plugin. However, the current implementation might not get all edge cases right and its best to just avoid code like this in the first place.

View File

@ -2,126 +2,18 @@
> Compile ES2015 classes to ES5
## Caveats
See our website [@babel/plugin-transform-classes](https://new.babeljs.io/docs/en/next/babel-plugin-transform-classes.html) for more information.
When extending a native class (e.g., `class extends Array {}`), the super class
needs to be wrapped. This is needed to workaround two problems:
- Babel transpiles classes using `SuperClass.apply(/* ... */)`, but native
classes aren't callable and thus throw in this case.
- Some built-in functions (like `Array`) always return a new object. Instead of
returning it, Babel should treat it as the new `this`.
## Install
The wrapper works on IE11 and every other browser with `Object.setPrototypeOf` or `__proto__` as fallback.
There is **NO IE <= 10 support**. If you need IE <= 10 it's recommended that you don't extend natives.
## Examples
**In**
```javascript
class Test {
constructor(name) {
this.name = name;
}
logger () {
console.log("Hello", this.name);
}
}
```
**Out**
```javascript
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Test = function () {
function Test(name) {
_classCallCheck(this, Test);
this.name = name;
}
Test.prototype.logger = function logger() {
console.log("Hello", this.name);
};
return Test;
}();
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-classes
npm install --save @babel/plugin-transform-classes
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```js
// without options
{
"plugins": ["@babel/plugin-transform-classes"]
}
// with options
{
"plugins": [
["@babel/plugin-transform-classes", {
"loose": true
}]
]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-classes script.js
yarn add --save @babel/plugin-transform-classes
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-classes"]
});
```
## Options
### `loose`
`boolean`, defaults to `false`.
#### Method enumerability
Please note that in loose mode class methods **are** enumerable. This is not in line
with the spec and you may run into issues.
#### Method assignment
Under loose mode, methods are defined on the class prototype with simple assignments
instead of being defined. This can result in the following not working:
```javascript
class Foo {
set bar() {
throw new Error("foo!");
}
}
class Bar extends Foo {
bar() {
// will throw an error when this method is defined
}
}
```
When `Bar.prototype.foo` is defined it triggers the setter on `Foo`. This is a
case that is very unlikely to appear in production code however it's something
to keep in mind.

View File

@ -2,129 +2,18 @@
> Compile ES2015 computed properties to ES5
## Example
See our website [@babel/plugin-transform-computed-properties](https://new.babeljs.io/docs/en/next/babel-plugin-transform-computed-properties.html) for more information.
**In**
## Install
```js
var obj = {
["x" + foo]: "heh",
["y" + bar]: "noo",
foo: "foo",
bar: "bar"
};
```
**Out**
```js
var _obj;
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
var obj = (
_obj = {},
_defineProperty(_obj, "x" + foo, "heh"),
_defineProperty(_obj, "y" + bar, "noo"),
_defineProperty(_obj, "foo", "foo"),
_defineProperty(_obj, "bar", "bar"),
_obj
);
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-computed-properties
npm install --save @babel/plugin-transform-computed-properties
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
Without options:
```json
{
"plugins": ["@babel/plugin-transform-computed-properties"]
}
```
With options:
```json
{
"plugins": [
["@babel/plugin-transform-computed-properties", {
"loose": true
}]
]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-computed-properties script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-computed-properties"]
});
```
## Options
### `loose`
`boolean`, defaults to `false`
Just like method assignment in classes, in loose mode, computed property names
use simple assignments instead of being defined. This is unlikely to be an issue
in production code.
#### Example
***In***
```js
var obj = {
["x" + foo]: "heh",
["y" + bar]: "noo",
foo: "foo",
bar: "bar"
};
```
***Out***
```js
var _obj;
var obj = (
_obj = {},
_obj["x" + foo] = "heh",
_obj["y" + bar] = "noo",
_obj.foo = "foo",
_obj.bar = "bar",
_obj
);
yarn add --save @babel/plugin-transform-computed-properties
```

View File

@ -2,103 +2,18 @@
> Compile ES2015 destructuring to ES5
## Examples
See our website [@babel/plugin-transform-destructuring](https://new.babeljs.io/docs/en/next/babel-plugin-transform-destructuring.html) for more information.
**In**
## Install
```javascript
let {x, y} = obj;
let [a, b, ...rest] = arr;
```
**Out**
```javascript
function _toArray(arr) { ... }
let _obj = obj,
x = _obj.x,
y = _obj.y;
let _arr = arr,
_arr2 = _toArray(_arr),
a = _arr2[0],
b = _arr2[1],
rest = _arr2.slice(2);
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-destructuring
npm install --save @babel/plugin-transform-destructuring
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-destructuring"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-destructuring script.js
yarn add --save @babel/plugin-transform-destructuring
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-destructuring"]
});
```
## Options
### `loose`
`boolean`, defaults to `false`.
Enabling this option will assume that what you want to destructure is an array and won't use `Array.from` on other iterables.
### `useBuiltIns`
`boolean`, defaults to `false`.
Enabling this option will use `Object.assign` directly instead of the Babel's `extends` helper.
##### Example
**.babelrc**
```json
{
"plugins": [
["@babel/plugin-transform-destructuring", { "useBuiltIns": true }]
]
}
```
**In**
```js
var { ...x } = z;
```
**Out**
```js
var _z = z,
x = Object.assign({}, _z);
```
## References
* [MDN: Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

View File

@ -1,69 +1,19 @@
# @babel/plugin-transform-dotall-regex
> Compile regular expressions using [the `s` (`dotAll`) flag](https://github.com/tc39/proposal-regexp-dotall-flag) to ES5 that works in todays environments.
> Compile regular expressions using the `s` (`dotAll`) flag to ES5.
## Example
See our website [@babel/plugin-transform-dotall-regex](https://new.babeljs.io/docs/en/next/babel-plugin-transform-dotall-regex.html) for more information.
**In**
## Install
```js
/./s
```
**Out**
```js
/[\0-\uFFFF]/
```
**In**
```js
/./su
```
**Out**
```js
/[\0-\u{10FFFF}]/u
```
[Heres an online demo.](https://mothereff.in/regexpu#input=const+regex+%3D+/foo.bar/s%3B%0Aconsole.log%28%0A++regex.test%28%27foo%5Cnbar%27%29%0A%29%3B%0A//+%E2%86%92+true&dotAllFlag=1)
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-dotall-regex
npm install --save @babel/plugin-transform-dotall-regex
```
## Usage
### Via `.babelrc` (recommended)
`.babelrc`
```json
{
"plugins": ["@babel/plugin-transform-dotall-regex"]
}
```
### Via CLI
or using yarn:
```sh
$ babel --plugins @babel/plugin-transform-dotall-regex script.js
yarn add --save @babel/plugin-transform-dotall-regex
```
### Via Node.js API
```js
require('@babel/core').transform(code, {
'plugins': ['@babel/plugin-transform-dotall-regex']
});
```
## Author
| [![twitter/mathias](https://gravatar.com/avatar/24e08a9ea84deb17ae121074d0f17125?s=70)](https://twitter.com/mathias "Follow @mathias on Twitter") |
|---|
| [Mathias Bynens](https://mathiasbynens.be/) |

View File

@ -1,61 +1,19 @@
# @babel/plugin-transform-duplicate-keys
> Compile objects with duplicate keys to valid strict ES5.
> Compile objects with duplicate keys to valid strict ES5
This plugin actually converts duplicate keys in objects to be computed properties, which then must be handled by the [@babel/plugin-transform-computed-properties](http://babeljs.io/docs/plugins/transform-computed-properties) plugin. The final result won't contain any object literals with duplicate keys.
See our website [@babel/plugin-transform-duplicate-keys](https://new.babeljs.io/docs/en/next/babel-plugin-transform-duplicate-keys.html) for more information.
## Example
## Install
**In**
```javascript
var x = { a: 5, a: 6 };
var y = {
get a() {},
set a(x) {},
a: 3
};
```
**Out**
```javascript
var x = { a: 5, ["a"]: 6 };
var y = {
get a() {},
set a(x) {},
["a"]: 3
};
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-duplicate-keys
npm install --save @babel/plugin-transform-duplicate-keys
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-duplicate-keys"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-duplicate-keys script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-duplicate-keys"]
});
yarn add --save @babel/plugin-transform-duplicate-keys
```

View File

@ -2,57 +2,18 @@
> Compile exponentiation operator to ES5
## Example
See our website [@babel/plugin-transform-exponentiation-operator](https://new.babeljs.io/docs/en/next/babel-plugin-transform-exponentiation-operator.html) for more information.
**In**
## Install
```javascript
let x = 10 ** 2;
x **= 3;
```
**Out**
```javascript
let x = Math.pow(10, 2);
x = Math.pow(x, 3);
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-exponentiation-operator
npm install --save @babel/plugin-transform-exponentiation-operator
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-exponentiation-operator"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-exponentiation-operator script.js
yarn add --save @babel/plugin-transform-exponentiation-operator
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-exponentiation-operator"]
});
```
## References
* [Proposal: Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator)
* [Spec: Exponential Operator](https://rwaldron.github.io/exponentiation-operator/)

View File

@ -1,71 +1,19 @@
# @babel/plugin-transform-flow-comments
> Turn flow type annotations into comments.
> Turn flow type annotations into comments
You should be able to use this plugin instead of `@babel/plugin-flow-strip-types` to preserve the `/* @flow */` directive and still use flow.
See our website [@babel/plugin-transform-flow-comments](https://new.babeljs.io/docs/en/next/babel-plugin-transform-flow-comments.html) for more information.
[Flow Comments Blog Post](http://flowtype.org/blog/2015/02/20/Flow-Comments.html)
## Install
## Example
**In**
```javascript
function foo(bar?) {}
function foo2(bar?: string) {}
function foo(x: number): string {}
type B = {
name: string;
};
export type GraphQLFormattedError = number;
import type A, { B, C } from './types';
import typeof D, { E, F } from './types';
```
**Out**
```javascript
"use strict";
function foo(bar /*:: ?*/) {}
function foo2(bar /*:: ?: string*/) {}
function foo(x /*: number*/) /*: string*/ {}
/*:: type B = {
name: string;
};*/
/*:: export type GraphQLFormattedError = number;*/
/*:: import type A, { B, C } from './types';*/
/*:: import typeof D, { E, F } from './types';*/
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-flow-comments
npm install --save @babel/plugin-transform-flow-comments
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-flow-comments"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-flow-comments script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-flow-comments"]
});
yarn add --save @babel/plugin-transform-flow-comments
```

View File

@ -1,59 +1,19 @@
# @babel/plugin-transform-flow-strip-types
> Strip all [flow](http://flowtype.org) type annotations and declarations from your output code.
> Strip flow type annotations from your output code.
## Example
See our website [@babel/plugin-transform-flow-strip-types](https://new.babeljs.io/docs/en/next/babel-plugin-transform-flow-strip-types.html) for more information.
**In**
## Install
```javascript
function foo(one: any, two: number, three?): string {}
```
**Out**
```javascript
function foo(one, two, three) {}
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-flow-strip-types
npm install --save @babel/plugin-transform-flow-strip-types
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-flow-strip-types"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-flow-strip-types script.js
yarn add --save @babel/plugin-transform-flow-strip-types
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-flow-strip-types"]
});
```
## Options
### `requireDirective`
`boolean`, defaults to `false`.
Setting this to true will only strip annotations and declarations from files
that contain the `// @flow` directive. It will also throw errors for any Flow
annotations found in files without the directive.

View File

@ -2,153 +2,18 @@
> Compile ES2015 for...of to ES5
## Example
See our website [@babel/plugin-transform-for-of](https://new.babeljs.io/docs/en/next/babel-plugin-transform-for-of.html) for more information.
**In**
## Install
```js
for (var i of foo) {}
```
**Out**
```js
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = foo[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var i = _step.value;
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-for-of
npm install --save @babel/plugin-transform-for-of
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
Without options:
```js
{
"plugins": ["@babel/plugin-transform-for-of"]
}
```
With options:
```js
{
"plugins": [
["@babel/plugin-transform-for-of", {
"loose": true, // defaults to false
"assumeArray": true // defaults to false
}]
]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-for-of script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-for-of"]
});
```
## Options
### `loose`
`boolean`, defaults to `false`
In loose mode, arrays are put in a fast path, thus heavily increasing performance.
All other iterables will continue to work fine.
#### Example
**In**
```js
for (var i of foo) {}
```
**Out**
```js
for (var _iterator = foo, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var i = _ref;
}
```
#### Abrupt completions
In loose mode an iterator's `return` method will not be called on abrupt completions caused by thrown errors.
Please see [google/traceur-compiler#1773](https://github.com/google/traceur-compiler/issues/1773) and
[babel/babel#838](https://github.com/babel/babel/issues/838) for more information.
### `assumeArray`
`boolean`, defaults to `false`
This will apply the optimization shown below to all for-of loops by assuming that _all_ loops are arrays.
Can be useful when you just want a for-of loop to represent a basic for loop over an array.
### Optimization
If a basic array is used, Babel will compile the for-of loop down to a regular for loop.
**In**
```js
for (let a of [1,2,3]) {}
```
**Out**
```js
var _arr = [1, 2, 3];
for (var _i = 0; _i < _arr.length; _i++) {
var a = _arr[_i];
}
yarn add --save @babel/plugin-transform-for-of
```

View File

@ -2,50 +2,18 @@
> Apply ES2015 function.name semantics to all functions
## Examples
See our website [@babel/plugin-transform-function-name](https://new.babeljs.io/docs/en/next/babel-plugin-transform-function-name.html) for more information.
**In**
## Install
```javascript
let number = (x) => x
```
**Out**
```javascript
var number = function number(x) {
return x;
};
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-function-name
npm install --save @babel/plugin-transform-function-name
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-function-name"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-function-name script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-function-name"]
});
yarn add --save @babel/plugin-transform-function-name
```

View File

@ -1,62 +1,19 @@
# @babel/plugin-transform-instanceof
> Wraps `instanceof` expressions to allow constructors to customize the logic with a `Symbol.hasInstance` method
> This plugin transforms all the ES2015 'instanceof' methods
## Example
See our website [@babel/plugin-transform-instanceof](https://new.babeljs.io/docs/en/next/babel-plugin-transform-instanceof.html) for more information.
**In**
## Install
```javascript
foo instanceof Bar;
```
**Out**
```javascript
function _instanceof(left, right) {
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
return right[Symbol.hasInstance](left);
} else {
return left instanceof right;
}
}
_instanceof(foo, Bar);
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-instanceof
npm install --save @babel/plugin-transform-instanceof
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-instanceof"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-instanceof script.js
yarn add --save @babel/plugin-transform-instanceof
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-instanceof"]
});
```
## References
* [ES6 Spec: InstanceOf Operator Semantics](https://www.ecma-international.org/ecma-262/6.0/#sec-instanceofoperator)
* [MDN: Symbol.hasInstance](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance)

View File

@ -1,57 +1,19 @@
# @babel/plugin-transform-jscript
> This plugin allows Babel to transform named function expressions into function declarations to get around some [particularly nasty JScript bugs](https://kangax.github.io/nfe/#jscript-bugs) related to name function expressions.
> Babel plugin to fix buggy JScript named function expressions
## Example
See our website [@babel/plugin-transform-jscript](https://new.babeljs.io/docs/en/next/babel-plugin-transform-jscript.html) for more information.
**In**
## Install
```javascript
var foo = function bar() {
};
```
**Out**
```javascript
"use strict";
var foo = (function () {
function bar() {}
return bar;
})();
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-jscript
npm install --save @babel/plugin-transform-jscript
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-jscript"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-jscript script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-jscript"]
});
yarn add --save @babel/plugin-transform-jscript
```

View File

@ -2,52 +2,18 @@
> Compile ES2015 unicode string and number literals to ES5
## Example
See our website [@babel/plugin-transform-literals](https://new.babeljs.io/docs/en/next/babel-plugin-transform-literals.html) for more information.
**In**
## Install
```js
var b = 0b11; // binary integer literal
var o = 0o7; // octal integer literal
const u = 'Hello\u{000A}\u{0009}!'; // unicode string literals, newline and tab
```
**Out**
```js
var b = 3; // binary integer literal
var o = 7; // octal integer literal
const u = 'Hello\n\t!'; // unicode string literals, newline and tab
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-literals
npm install --save @babel/plugin-transform-literals
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-literals"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-literals script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-literals"]
});
yarn add --save @babel/plugin-transform-literals
```

View File

@ -2,48 +2,18 @@
> Ensure that reserved words are quoted in property accesses
## Example
See our website [@babel/plugin-transform-member-expression-literals](https://new.babeljs.io/docs/en/next/babel-plugin-transform-member-expression-literals.html) for more information.
**In**
## Install
```javascript
foo.catch;
```
**Out**
```javascript
foo["catch"];
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-member-expression-literals
npm install --save @babel/plugin-transform-member-expression-literals
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-member-expression-literals"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-member-expression-literals script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-member-expression-literals"]
});
yarn add --save @babel/plugin-transform-member-expression-literals
```

View File

@ -1,61 +1,19 @@
# @babel/plugin-transform-modules-amd
> This plugin transforms ES2015 modules to [Asynchronous Module Definition (AMD)](https://github.com/amdjs/amdjs-api).
> This plugin transforms ES2015 modules to AMD
## Example
See our website [@babel/plugin-transform-modules-amd](https://new.babeljs.io/docs/en/next/babel-plugin-transform-modules-amd.html) for more information.
**In**
## Install
```javascript
export default 42;
```
**Out**
```javascript
define(["exports"], function (exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = 42;
});
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-modules-amd
npm install --save @babel/plugin-transform-modules-amd
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-modules-amd"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-modules-amd script.js
yarn add --save @babel/plugin-transform-modules-amd
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-modules-amd"]
});
```
### Options
See options for `@babel/plugin-transform-modules-commonjs`.

View File

@ -1,163 +1,19 @@
# @babel/plugin-transform-modules-commonjs
> This plugin transforms ES2015 modules to [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1).
> This plugin transforms ES2015 modules to CommonJS
## Example
See our website [@babel/plugin-transform-modules-commonjs](https://new.babeljs.io/docs/en/next/babel-plugin-transform-modules-commonjs.html) for more information.
**In**
## Install
```javascript
export default 42;
```
**Out**
```javascript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = 42;
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-modules-commonjs
npm install --save @babel/plugin-transform-modules-commonjs
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```js
// without options
{
"plugins": ["@babel/plugin-transform-modules-commonjs"]
}
// with options
{
"plugins": [
["@babel/plugin-transform-modules-commonjs", {
"allowTopLevelThis": true
}]
]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-modules-commonjs script.js
yarn add --save @babel/plugin-transform-modules-commonjs
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-modules-commonjs"]
});
```
## Options
### `loose`
`boolean`, defaults to `false`.
By default, when using exports with babel a non-enumerable `__esModule` property
is exported.
```javascript
var foo = exports.foo = 5;
Object.defineProperty(exports, "__esModule", {
value: true
});
```
In environments that don't support this you can enable loose mode on `@babel/plugin-transform-modules-commonjs`
and instead of using `Object.defineProperty` an assignment will be used instead.
```javascript
var foo = exports.foo = 5;
exports.__esModule = true;
```
### `strict`
`boolean`, defaults to `false`
By default, when using exports with babel a non-enumerable `__esModule` property
is exported. In some cases this property is used to determine if the import _is_ the
default export or if it _contains_ the default export.
```javascript
var foo = exports.foo = 5;
Object.defineProperty(exports, "__esModule", {
value: true
});
```
In order to prevent the `__esModule` property from being exported, you can set
the `strict` option to `true`.
### `noInterop`
`boolean`, defaults to `false`
By default, when using exports with babel a non-enumerable `__esModule` property
is exported. This property is then used to determine if the import _is_ the default
export or if it _contains_ the default export.
```javascript
"use strict";
var _foo = _interopRequireDefault(require("foo"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
```
In cases where the auto-unwrapping of `default` is not needed, you can set the
`noInterop` option to `true` to avoid the usage of the `interopRequireDefault`
helper (shown in inline form above).
### `lazy`
`boolean`, `Array<string>`, or `(string) => boolean`, defaults to `false`
Changes Babel's compiled `import` statements to be lazily evaluated when their
imported bindings are used for the first time.
This can improve initial load time of your module because evaluating
dependencies up front is sometimes entirely un-necessary. This is especially
the case when implementing a library module.
The value of `lazy` has a few possible effects:
* `false` - No lazy initialization of any imported module.
* `true` - Do not lazy-initialize local `./foo` imports, but lazy-init `foo` dependencies.
Local paths are much more likely to have circular dependencies, which may break if loaded lazily,
so they are not lazy by default, whereas dependencies between independent modules are rarely cyclical.
* `Array<string>` - Lazy-initialize all imports with source matching one of the given strings.
* `(string) => boolean` - Pass a callback that will be called to decide if a given source string should be lazy-loaded.
The two cases where imports can never be lazy are:
* `import "foo";`
Side-effect imports are automatically non-lazy since their very existence means
that there is no binding to later kick off initialization.
* `export * from "foo"`
Re-exporting all names requires up-front execution because otherwise there is no
way to know what names need to be exported.

View File

@ -1,73 +1,19 @@
# @babel/plugin-transform-modules-systemjs
> This plugin transforms ES2015 modules to [SystemJS](https://github.com/systemjs/systemjs).
> This plugin transforms ES2015 modules to SystemJS
## Example
See our website [@babel/plugin-transform-modules-systemjs](https://new.babeljs.io/docs/en/next/babel-plugin-transform-modules-systemjs.html) for more information.
**In**
## Install
```javascript
export default 42;
```
**Out**
```javascript
System.register([], function (_export, _context) {
return {
setters: [],
execute: function () {
_export("default", 42);
}
};
});
```
For dynamic import support (`import('./lazy.js').then(m => ...)`), enable the [@babel/plugin-syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import/) plugin before this one.
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-modules-systemjs
npm install --save @babel/plugin-transform-modules-systemjs
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
Without options:
```json
{
"plugins": ["@babel/plugin-transform-modules-systemjs"]
}
```
With options:
```json
{
"plugins": [
["@babel/plugin-transform-modules-systemjs", {
// outputs SystemJS.register(...)
"systemGlobal": "SystemJS"
}]
]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-modules-systemjs script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-modules-systemjs"]
});
yarn add --save @babel/plugin-transform-modules-systemjs
```

View File

@ -1,214 +1,19 @@
# @babel/plugin-transform-modules-umd
> This plugin transforms ES2015 modules to [Universal Module Definition (UMD)](https://github.com/umdjs/umd).
> This plugin transforms ES2015 modules to UMD
## Example
See our website [@babel/plugin-transform-modules-umd](https://new.babeljs.io/docs/en/next/babel-plugin-transform-modules-umd.html) for more information.
**In**
## Install
```javascript
export default 42;
```
**Out**
```javascript
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports"], factory);
} else if (typeof exports !== "undefined") {
factory(exports);
} else {
var mod = {
exports: {}
};
factory(mod.exports);
global.actual = mod.exports;
}
})(this, function (exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = 42;
});
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-modules-umd
npm install --save @babel/plugin-transform-modules-umd
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-modules-umd"]
}
```
You can also override the names of particular libraries when this module is
running in the browser. For example the `es6-promise` library exposes itself
as `global.Promise` rather than `global.es6Promise`. This can be accommodated by:
```json
{
"plugins": [
["@babel/plugin-transform-modules-umd", {
"globals": {
"es6-promise": "Promise"
}
}]
]
}
```
#### Default semantics
There are a few things to note about the default semantics.
_First_, this transform uses the
[basename](https://en.wikipedia.org/wiki/Basename) of each import to generate
the global names in the UMD output. This means that if you're importing
multiple modules with the same basename, like:
```js
import fooBar1 from "foo-bar";
import fooBar2 from "./mylib/foo-bar";
```
it will transpile into two references to the same browser global:
```js
factory(global.fooBar, global.fooBar);
```
If you set the plugin options to:
```json
{
"globals": {
"foo-bar": "fooBAR",
"./mylib/foo-bar": "mylib.fooBar"
}
}
```
it will still transpile both to one browser global:
```js
factory(global.fooBAR, global.fooBAR);
```
because again the transform is only using the basename of the import.
_Second_, the specified override will still be passed to the `toIdentifier`
function in [babel-types/src/converters](https://github.com/babel/babel/blob/master/packages/babel-types/src/converters.js).
This means that if you specify an override as a member expression like:
```json
{
"globals": {
"fizzbuzz": "fizz.buzz"
}
}
```
this will _not_ transpile to `factory(global.fizz.buzz)`. Instead, it will
transpile to `factory(global.fizzBuzz)` based on the logic in `toIdentifier`.
_Third_, you cannot override the exported global name.
#### More flexible semantics with `exactGlobals: true`
All of these behaviors can limit the flexibility of the `globals` map. To
remove these limitations, you can set the `exactGlobals` option to `true`.
Doing this instructs the plugin to:
1. always use the full import string instead of the basename when generating
the global names
2. skip passing `globals` overrides to the `toIdentifier` function. Instead,
they are used exactly as written, so you will get errors if you do not use
valid identifiers or valid uncomputed (dot) member expressions.
3. allow the exported global name to be overridden via the `globals` map. Any
override must again be a valid identifier or valid member expression.
Thus, if you set `exactGlobals` to `true` and do not pass any overrides, the
first example of:
```js
import fooBar1 from "foo-bar";
import fooBar2 from "./mylib/foo-bar";
```
will transpile to:
```js
factory(global.fooBar, global.mylibFooBar);
```
And if you set the plugin options to:
```json
{
"globals": {
"foo-bar": "fooBAR",
"./mylib/foo-bar": "mylib.fooBar"
},
"exactGlobals": true
}
```
then it'll transpile to:
```js
factory(global.fooBAR, global.mylib.fooBar)
```
Finally, with the plugin options set to:
```json
{
"plugins": [
"@babel/plugin-external-helpers",
["@babel/plugin-transform-modules-umd", {
"globals": {
"my/custom/module/name": "My.Custom.Module.Name"
},
"exactGlobals": true
}]
],
"moduleId": "my/custom/module/name"
}
```
it will transpile to:
```js
factory(mod.exports);
global.My = global.My || {};
global.My.Custom = global.My.Custom || {};
global.My.Custom.Module = global.My.Custom.Module || {};
global.My.Custom.Module.Name = mod.exports;
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-modules-umd script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-modules-umd"]
});
yarn add --save @babel/plugin-transform-modules-umd
```

View File

@ -1,104 +1,19 @@
# @babel/plugin-transform-new-target
This plugins allows babel to transform `new.target` meta property into a
(correct in most cases) `this.constructor` expression.
> Transforms new.target meta property
## Example
See our website [@babel/plugin-transform-new-target](https://new.babeljs.io/docs/en/next/babel-plugin-transform-new-target.html) for more information.
```js
function Foo() {
console.log(new.target);
}
## Install
Foo(); // => undefined
new Foo(); // => Foo
```
```js
class Foo {
constructor() {
console.log(new.target);
}
}
class Bar extends Foo {
}
new Foo(); // => Foo
new Bar(); // => Bar
```
### Caveats
This plugin relies on `this.constructor`, which means `super` must
already have been called when using untransformed classes.
```js
class Foo {}
class Bar extends Foo {
constructor() {
// This will be a problem if classes aren't transformed to ES5
new.target;
super();
}
}
```
Additionally, this plugin cannot transform all `Reflect.construct` cases
when using `newTarget` with ES5 function classes (transformed ES6 classes).
```js
function Foo() {
console.log(new.target);
}
// Bar extends Foo in ES5
function Bar() {
Foo.call(this);
}
Bar.prototype = Object.create(Foo.prototype);
Bar.prototype.constructor = Bar;
// Baz does not extend Foo
function Baz() {}
Reflect.construct(Foo, []); // => Foo (correct)
Reflect.construct(Foo, [], Bar); // => Bar (correct)
Reflect.construct(Bar, []); // => Bar (incorrect, though this is how ES5
// inheritience is commonly implemented.)
Reflect.construct(Foo, [], Baz); // => undefined (incorrect)
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-new-target
npm install --save @babel/plugin-transform-new-target
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-new-target"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-new-target script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-new-target"]
});
yarn add --save @babel/plugin-transform-new-target
```

View File

@ -1,60 +1,19 @@
# @babel/plugin-transform-object-assign
> Replace `Object.assign` with an inline helper. If you are authoring an application, rather than a library, it is recommended that you use the `Object.assign` polyfill instead.
> Replace Object.assign with an inline helper
## Example
See our website [@babel/plugin-transform-object-assign](https://new.babeljs.io/docs/en/next/babel-plugin-transform-object-assign.html) for more information.
**In**
## Install
```javascript
Object.assign(a, b);
```
**Out**
```javascript
var _extends = ...;
_extends(a, b);
```
## Caveats
- Will only work with code of the form `Object.assign` or `Object['assign']`. The following patterns are not supported:
```javascript
var { assign } = Object;
var assign = Object.assign;
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-object-assign
npm install --save @babel/plugin-transform-object-assign
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-object-assign"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-object-assign script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-object-assign"]
});
yarn add --save @babel/plugin-transform-object-assign
```

View File

@ -1,53 +1,19 @@
# @babel/plugin-transform-object-set-prototype-of-to-assign
> This plugin will transform all `Object.setPrototypeOf` calls to a method that will do a shallow defaults of all properties.
> Turn Object.setPrototypeOf to assignments
**NOTE:** There are some caveats when using this plugin, see the [`@babel/plugin-transform-proto-to-assign` README](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-proto-to-assign) for more information.
See our website [@babel/plugin-transform-object-set-prototype-of-to-assign](https://new.babeljs.io/docs/en/next/babel-plugin-transform-object-set-prototype-of-to-assign.html) for more information.
## Example
## Install
**In**
```javascript
Object.setPrototypeOf(bar, foo);
```
**Out**
```javascript
var _defaults = ...;
_defaults(bar, foo);
```
## Installation
Using npm:
```sh
npm install --save-dev @babel/plugin-transform-object-set-prototype-of-to-assign
npm install --save @babel/plugin-transform-object-set-prototype-of-to-assign
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["@babel/plugin-transform-object-set-prototype-of-to-assign"]
}
```
### Via CLI
or using yarn:
```sh
babel --plugins @babel/plugin-transform-object-set-prototype-of-to-assign script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-object-set-prototype-of-to-assign"]
});
yarn add --save @babel/plugin-transform-object-set-prototype-of-to-assign
```

Some files were not shown because too many files have changed in this diff Show More