Babel 中文文档
  • 印记中文
  • 文档
  • 配置
  • 试用
  • 视频
  • 博客
  • 赞助
  • 团队
  • GitHub

›ES2018

扩展

  • React Plugin
  • Flow Plugin
  • Typescript Plugin

模块

  • AMD
  • Common JS
  • SystemJS
  • UMD

TC39 提案

  • async-do-expressions
  • decorators
  • do-expressions
  • export-default-from
  • function-bind
  • function-sent
  • partial-application
  • pipeline-operator
  • private-methods
  • record-and-tuple
  • throw-expressions

@babel/preset-env

    ES2022

    • class-properties
    • class-static-block
    • private-property-in-object
    • syntax-top-level-await

    ES2021

    • logical-assignment-operators
    • numeric-separator

    ES2020

    • export-namespace-from
    • nullish-coalescing-operator
    • optional-chaining
    • syntax-bigint
    • syntax-dynamic-import
    • syntax-import-meta

    ES2019

    • optional-catch-binding
    • json-strings

    ES2018

    • async-generator-functions
    • object-rest-spread
    • unicode-property-regex
    • dotall-regex
    • named-capturing-groups-regex

    ES2017

    • async-to-generator

    ES2016

    • exponentiation-operator

    ES2015

    • arrow-functions
    • block-scoping
    • classes
    • computed-properties
    • destructuring
    • duplicate-keys
    • for-of
    • function-name
    • instanceof
    • literals
    • new-target
    • object-super
    • parameters
    • shorthand-properties
    • spread
    • sticky-regex
    • template-literals
    • typeof-symbol
    • unicode-escapes
    • unicode-regex

    ES5

    • property-mutators

    ES3

    • member-expression-literals
    • property-literals
    • reserved-words
Edit

@babel/plugin-proposal-object-rest-spread

NOTE: This plugin is included in @babel/preset-env, in ES2018

Example

Rest Properties

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

let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

Installation

npm install --save-dev @babel/plugin-proposal-object-rest-spread

Usage

With a configuration file (Recommended)

{
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

Via CLI

babel --plugins @babel/plugin-proposal-object-rest-spread script.js

Via Node API

require("@babel/core").transformSync("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).

⚠️ Consider migrating to the top level setSpreadProperties assumption.

// babel.config.json
{
  "assumptions": {
    "setSpreadProperties": true
  }
}

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

{
  "assumptions": {
    "setSpreadProperties": true
  },
  "plugins": [
    ["@babel/plugin-proposal-object-rest-spread", { "useBuiltIns": true }]
  ]
}

In

z = { x, ...y };

Out

z = Object.assign({ x }, y);

You can read more about configuring plugin options here

References

  • Proposal: Object Rest/Spread Properties for ECMAScript
  • Spec
  • Spread VS. Object.assign
  • Assigning VS. defining properties
← async-generator-functionsunicode-property-regex →
  • Example
    • Rest Properties
    • Spread Properties
  • Installation
  • Usage
    • With a configuration file (Recommended)
    • Via CLI
    • Via Node API
  • Options
    • loose
    • useBuiltIns
  • References
Babel 中文文档
文档
学习 ES2015
社区
视频用户Stack OverflowSlack 频道Twitter
更多
博客GitHub 组织GitHub 仓库Website 仓库旧版网址 6.x旧版网址 5.x