W3cubDocs

/Babel 7

@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
  • Yarn
  • pnpm
npm install --save-dev @babel/plugin-proposal-object-rest-spread

Usage​ 

{
  "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.

{
  "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​

© 2014-present Sebastian McKenzie
Licensed under the MIT License.
https://babeljs.io/docs/babel-plugin-proposal-object-rest-spread/