babel-plugin-transform-es2015-spread

What is babel-plugin-transform-es2015-spread?

The babel-plugin-transform-es2015-spread npm package is used to compile ES2015 spread syntax to a version of JavaScript that can run in environments that do not support this syntax natively. Spread syntax allows an iterable such as an array to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

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

Function Calls

This feature allows an array of arguments to be spread out and passed as individual arguments to a function call. The code sample demonstrates spreading an array into a function call.

function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(sum(...numbers));

Array Literals

Spread syntax can be used to concatenate arrays or insert multiple elements into an array at once. The code sample shows how to use spread syntax to merge arrays.

const parts = ['shoulders', 'knees']; const body = ['head', ...parts, 'toes'];

Object Literals

This feature allows for the properties of one or more source objects to be copied into a new object. The code sample demonstrates both cloning and merging objects using spread syntax.

const obj1 = { foo: 'bar', x: 42 }; const obj2 = { foo: 'baz', y: 13 }; const clonedObj = { ...obj1 }; const mergedObj = { ...obj1, ...obj2 };

Other packages similar to babel-plugin-transform-es2015-spread

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

This package provides functionality similar to babel-plugin-transform-es2015-spread but focuses on the object rest and spread properties proposal, which was later included in ES2018. It allows for spreading properties of objects in a similar manner but is more up-to-date with the latest JavaScript specifications.

@babel/preset-env

While not a direct replacement, @babel/preset-env includes the functionality of babel-plugin-transform-es2015-spread as part of a comprehensive preset that compiles ES2015+ syntax down to ES5. It automatically determines the Babel plugins and polyfills needed based on the target environment's support for modern JavaScript features.

README

babel-plugin-transform-es2015-spread

Compile ES2015 spread to ES5

Example

In

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

var c = { foo: 'bar', baz: 42 };
var d = {...c, a: 2};

Out

var _extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];
    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }
  return target;
}

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

var c = { foo: 'bar', baz: 42 };
var d = _extends({}, c, { a: 2 });

Installation

npm install --save-dev babel-plugin-transform-es2015-spread

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

{
  "plugins": ["transform-es2015-spread"]
}

With options:

{
  "plugins": [
    ["transform-es2015-spread", {
      "loose": true
    }]
  ]
}

Via CLI

babel --plugins transform-es2015-spread script.js

Via Node API

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

Options

loose

boolean, defaults to false.

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