diff --git a/babel.config.js b/babel.config.js index 7317fc3a2..5e0842808 100644 --- a/babel.config.js +++ b/babel.config.js @@ -16,7 +16,13 @@ module.exports = function (api) { shippedProposals: true, }, ], - [ "@babel/preset-react", { development: process.env.NODE_ENV === "development" } ], + [ + "@babel/preset-react", + { + runtime: "automatic", + development: process.env.NODE_ENV === "development", + }, + ], [ "@babel/preset-typescript", { diff --git a/docs/caveats.md b/docs/caveats.md index 9f9dd5256..29ac0255d 100644 --- a/docs/caveats.md +++ b/docs/caveats.md @@ -43,7 +43,7 @@ If you're inheriting from a class then static properties are inherited from it via [\_\_proto\_\_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto), this is widely supported but you may run into problems with much older browsers. -**NOTE:** `__proto__` is not supported on IE <= 10 so static properties +**NOTE:** `__proto__` is not supported on IE ≤ 10 so static properties **will not** be inherited. See the [protoToAssign](plugin-transform-proto-to-assign.md) for a possible work around. diff --git a/docs/core.md b/docs/core.md index ca5a028b0..576b2712a 100644 --- a/docs/core.md +++ b/docs/core.md @@ -284,7 +284,7 @@ function for information about `ConfigItem` fields. ### createConfigItem -> babel.createConfigItem(value: string | {} | Function | [string | {} | Function, {} | void], { dirname?: string, type?: "preset" | "plugin" }): ConfigItem +> 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 diff --git a/docs/options.md b/docs/options.md index 23abe0ffa..7b18a0db4 100644 --- a/docs/options.md +++ b/docs/options.md @@ -401,7 +401,7 @@ When no targets are specified: Babel will assume you are using the [browserslist Type: `boolean` -You may also target browsers supporting ES Modules (). When the `esmodules` target is specified, it will intersect with the `browsers` target and `browserslist`'s targets. You can use this approach in combination with `` to conditionally serve smaller scripts to users (https://jakearchibald.com/2017/es-modules-in-browsers/#nomodule-for-backwards-compatibility). +You may also target browsers supporting [ES Modules](https://www.ecma-international.org/ecma-262/6.0/#sec-modules). When the `esmodules` target is specified, it will intersect with the `browsers` target and `browserslist`'s targets. You can use this approach in combination with `` to conditionally serve smaller scripts to users (https://jakearchibald.com/2017/es-modules-in-browsers/#nomodule-for-backwards-compatibility). :::note When specifying both `browsers` and the esmodules target, they will be intersected. ::: diff --git a/docs/parser.md b/docs/parser.md index b0e5cf410..91cb21e6b 100644 --- a/docs/parser.md +++ b/docs/parser.md @@ -202,7 +202,7 @@ require("@babel/parser").parse("code", { | Name | Code Example | |------|--------------| | `flow` ([repo](https://github.com/facebook/flow)) | `var a: string = "";` | -| `flowComments` ([docs](https://flow.org/en/docs/types/comments/)) | /*:: type Foo = {...}; */ | +| `flowComments` ([docs](https://flow.org/en/docs/types/comments/)) | /*:: type Foo = \{...}; */ | | `jsx` ([repo](https://facebook.github.io/jsx/)) | `{s}` | | `typescript` ([repo](https://github.com/Microsoft/TypeScript)) | `var a: string = "";` | | `v8intrinsic` | `%DebugPrint(foo);` | @@ -360,7 +360,7 @@ This option is deprecated and will be removed in a future version. Code that is | SyntaxType | Record Example | Tuple Example | | --- | --- | --- | | `"hash"` | `#{ a: 1 }` | `#[1, 2]` | - | `"bar"` | {| a: 1 |} | [|1, 2|] | + | `"bar"` | \{| a: 1 |} | [|1, 2|] | See [Ergonomics of `#{}`/`#[]`](https://github.com/tc39/proposal-record-tuple/issues/10) for more information. - `flow`: diff --git a/docs/plugin-proposal-decorators.md b/docs/plugin-proposal-decorators.md index bd4eb6fbf..991ab9034 100644 --- a/docs/plugin-proposal-decorators.md +++ b/docs/plugin-proposal-decorators.md @@ -102,7 +102,7 @@ Selects the decorators proposal to use: ::: -:::babel7 +::::babel7 ### `version` @@ -213,7 +213,7 @@ The `include` option will enable the transforms included in `@babel/preset-env` You can read more about configuring plugin options [here](https://babeljs.io/docs/en/plugins#plugin-options) ::: -::: +:::: ## 参考 diff --git a/docs/plugin-transform-classes.md b/docs/plugin-transform-classes.md index 1440eb1b3..7b60845f9 100644 --- a/docs/plugin-transform-classes.md +++ b/docs/plugin-transform-classes.md @@ -19,7 +19,7 @@ needs to be wrapped. This is needed to workaround two problems: returning it, Babel should treat it as the new `this`. 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. +There is **NO IE ≤ 10 support**. If you need IE ≤ 10 it's recommended that you don't extend natives. Babel needs to statically know if you are extending a built-in class. For this reason, the "mixin pattern" doesn't work: diff --git a/docs/preset-env.md b/docs/preset-env.md index 626b5d07a..179cf26a1 100644 --- a/docs/preset-env.md +++ b/docs/preset-env.md @@ -96,14 +96,14 @@ For usage, refer to the [`targets` option](options.md#targets) documentation. Added in: `v7.9.0` -:::babel7 +::::babel7 -::::note +:::note This option will be enabled by default in Babel 8. -:::: - ::: +:::: + By default, `@babel/preset-env` (and Babel plugins in general) grouped ECMAScript syntax features into collections of closely related smaller features. These groups can be large and include a lot of edge cases, for example "function arguments" includes destructured, default and rest parameters. From this grouping information, Babel enables or disables each group based on the browser support target you specify to `@babel/preset-env`’s `targets` option. When this option is enabled, `@babel/preset-env` tries to compile the broken syntax to the closest _non-broken modern syntax_ supported by your target browsers. Depending on your `targets` and on how many modern syntax you are using, this can lead to a significant size reduction in the compiled app. This option merges the features of [`@babel/preset-modules`](https://github.com/babel/preset-modules) without having to use another preset. @@ -258,9 +258,7 @@ npm install core-js Only use `import "core-js";` once in your whole app. :::babel7 - If you are using `@babel/polyfill`, it already includes `core-js`: importing it twice will throw an error. - ::: Multiple imports or requires of those packages might cause global collisions and other issues that are hard to trace. @@ -307,15 +305,15 @@ import "core-js/modules/esnext.math.scale"; You can read [core-js](https://github.com/zloirock/core-js)'s documentation for more information about the different entry points. -:::babel7 +::::babel7 -::::note +:::note When using `core-js@2` (either explicitly using the [`corejs: "2"`](#corejs) option or implicitly), `@babel/preset-env` will also transform imports and requires of `@babel/polyfill`. This behavior is deprecated because it isn't possible to use `@babel/polyfill` with different `core-js` versions. -:::: - ::: +:::: + #### `useBuiltIns: 'usage'` Adds specific imports for polyfills when they are used in each file. We take advantage of the fact that a bundler will load the same polyfill only once. @@ -386,7 +384,7 @@ By default, only polyfills for stable ECMAScript features are injected: if you w `boolean`, defaults to `false`. -

+
Example With Babel 7's [JavaScript config file](config-files#javascript) support, you can force all transforms to be run if env is set to `production`. @@ -412,7 +410,7 @@ module.exports = function(api) { }; ``` -

+
:::danger `targets.uglify` is deprecated and will be removed in the next major in diff --git a/js/repl/CodeMirror.tsx b/js/repl/CodeMirror.tsx index adb3868a5..2d6d7a8bc 100644 --- a/js/repl/CodeMirror.tsx +++ b/js/repl/CodeMirror.tsx @@ -60,7 +60,7 @@ export default class ReactCodeMirror extends React.Component { } } - componentWillReceiveProps(nextProps: Props) { + UNSAFE_componentWillReceiveProps(nextProps: Props) { if ( nextProps.value && nextProps.value !== this.props.value && @@ -130,7 +130,7 @@ injectGlobal({ ".CodeMirror": { height: "100% !important", width: "100% !important", - "-webkit-overflow-scrolling": "touch", + WebkitOverflowScrolling: "touch", }, ".CodeMirror pre.CodeMirror-placeholder.CodeMirror-line-like": css({ color: colors.foregroundLight, diff --git a/js/repl/CodeMirrorPanel.tsx b/js/repl/CodeMirrorPanel.tsx index 8ce08bedc..d0f0a5003 100644 --- a/js/repl/CodeMirrorPanel.tsx +++ b/js/repl/CodeMirrorPanel.tsx @@ -53,7 +53,7 @@ const sharedBoxStyles: Interpolation = { padding: "0.5rem 0.75rem", fontFamily: "monospace", whiteSpace: "pre-wrap", - "-webkit-overflow-scrolling": "touch", + WebkitOverflowScrolling: "touch", }; const styles = { diff --git a/js/repl/Modal.tsx b/js/repl/Modal.tsx index ffe6caf9f..2d616d443 100644 --- a/js/repl/Modal.tsx +++ b/js/repl/Modal.tsx @@ -1,6 +1,6 @@ import { css, keyframes } from "@emotion/css"; import React, { Component } from "react"; -import ReactDOM from "react-dom"; +import { createPortal } from "react-dom"; import type { ReactNode, SyntheticEvent } from "react"; @@ -84,7 +84,7 @@ export default class Modal extends Component { ); - return ReactDOM.createPortal(result, this._node); + return createPortal(result, this._node); } } diff --git a/js/repl/ReplOptions.tsx b/js/repl/ReplOptions.tsx index 503b7110c..64fa3d143 100644 --- a/js/repl/ReplOptions.tsx +++ b/js/repl/ReplOptions.tsx @@ -436,19 +436,10 @@ class ExpandedContainer extends Component { "reactRuntime", (t) => t.value )} + value={presetsOptions.reactRuntime} > - - + + { "decoratorsVersion", (t) => t.value )} + value={presetsOptions.decoratorsVersion} > {Object.keys(DECORATOR_PROPOSALS).map((key) => ( - ))} @@ -515,12 +504,10 @@ class ExpandedContainer extends Component { "pipelineProposal", (t) => t.value )} + value={presetsOptions.pipelineProposal} > {Object.keys(PIPELINE_PROPOSALS).map((key) => ( - ))} @@ -754,7 +741,7 @@ class ExpandedContainer extends Component { ? false : assumptions[option]; return ( -