メインコンテンツにスキップ

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

情報

このプラグインは、ES2018で、@babel/preset-envに含まれています。

例​

残余プロパティ​

JavaScript
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 }

スプレッドプロパティ​

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

インストール​

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

使用方法​

babel.config.json
{
  "plugins": ["@babel/plugin-transform-object-rest-spread"]
}

CLI経由​

シェル
babel --plugins @babel/plugin-transform-object-rest-spread script.js

Node API経由​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-object-rest-spread"],
});

オプション​

デフォルトでは、このプラグインはBabelのobjectSpreadヘルパーを使用して、仕様に準拠したコードを生成します。

loose​

boolean、デフォルトはfalse。

このオプションを有効にすると、Babelのextendsヘルパーが使用されます。これは基本的にObject.assignと同じです（直接使用するには、以下の`useBuiltIns`を参照してください）。

注意

トップレベルのsetSpreadPropertiesの仮定に移行することを検討してください。

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

ほぼ同等であっても、スプレッドとObject.assignの間には重要な違いがあることに注意してください。**スプレッドは新しいプロパティを_定義_しますが、Object.assign()はそれらを_設定_します。**そのため、このモードを使用すると、予期しない結果が生じる場合があります。

詳細については、Spread VS. Object.assignとプロパティの割り当てVS.定義をご覧ください。

useBuiltIns​

boolean、デフォルトはfalse。

このオプションを有効にすると、Babelのextendsヘルパーの代わりに、Object.assignが直接使用されます。

例​

.babelrc

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

入力

JavaScript
z = { x, ...y };

出力

JavaScript
z = Object.assign({ x }, y);
ヒント

プラグインオプションの設定について詳しくは、こちらをご覧ください。

参考資料​