@babel/plugin-transform-spread

What is @babel/plugin-transform-spread?

The @babel/plugin-transform-spread npm package is a plugin for Babel, a JavaScript compiler, that transforms spread properties in object literals and spread elements in array literals into a form that can be understood by environments that do not support the spread syntax. This transformation ensures compatibility with older browsers or JavaScript environments.

What are @babel/plugin-transform-spread's main functionalities?

Object Spread

Transforms spread properties in object literals to use Object.assign, enabling the combination of multiple objects into one.

{"const obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1, c: 3 };\n// Transformed to:\n// const obj2 = Object.assign({}, obj1, { c: 3 });"}

Array Spread

Transforms spread elements in array literals to use Array.concat, allowing the creation of new arrays by combining or adding elements.

{"const arr1 = [1, 2];\nconst arr2 = [...arr1, 3, 4];\n// Transformed to:\n// const arr2 = arr1.concat([3, 4]);"}

Other packages similar to @babel/plugin-transform-spread

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

This package provides functionality similar to @babel/plugin-transform-spread but focuses on both spreading of elements and the rest properties for object destructuring assignment and spread properties for object literals. It's a more comprehensive solution for handling spread and rest properties in modern JavaScript.

core-js

While not a direct alternative, core-js includes polyfills for many ECMAScript features, including the spread syntax. It allows developers to use spread syntax in environments that do not natively support it by providing the necessary polyfills.

README

@babel/plugin-transform-spread

Compile ES2015 spread to ES5

Example

In

var a = ['a', 'b', 'c'];
var b = [...a, 'foo'];

Out

var a = [ 'a', 'b', 'c' ];
var b = a.concat([ 'foo' ]);

Installation

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

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

{
  "plugins": ["@babel/plugin-transform-spread"]
}

With options:

{
  "plugins": [
    ["@babel/plugin-transform-spread", {
      "loose": true
    }]
  ]
}

Via CLI

babel --plugins @babel/plugin-transform-spread script.js

Via Node API

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

Options

loose

boolean, defaults to false.

In loose mode, all iterables are assumed to be arrays.