1. babel-plugin-transform-object-rest-spread
Compile object rest and spread to ES5
babel-plugin-transform-object-rest-spread
Package: babel-plugin-transform-object-rest-spread
Created by: babel
Last modified: Fri, 21 Jul 2023 15:42:30 GMT
Version: 6.26.0
License: MIT
Downloads: 7,294,095
Repository: https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-object-rest-spread

Install

npm install babel-plugin-transform-object-rest-spread
yarn add babel-plugin-transform-object-rest-spread

babel-plugin-transform-object-rest-spread

This plugin allows Babel to transform rest properties for object destructuring assignment and spread properties for object literals.

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-transform-object-rest-spread

Usage

Via .babelrc (Recommended)

.babelrc

 {
  "plugins": ["transform-object-rest-spread"]
}

Via CLI

 babel --plugins transform-object-rest-spread script.js

Via Node API

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

Options

useBuiltIns

boolean, defaults to false.

By default, this plugin uses Babel's extends helper which polyfills Object.assign. Enabling this option will use Object.assign directly.

.babelrc

 {
  "plugins": [
    ["transform-object-rest-spread", { "useBuiltIns": true }]
  ]
}

In

 z = { x, ...y };

Out

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

References

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin