@babel/plugin-transform-shorthand-properties

What is @babel/plugin-transform-shorthand-properties?

The @babel/plugin-transform-shorthand-properties package is a Babel plugin that transforms object literal shorthand syntax into regular object syntax. This is useful for ensuring compatibility with environments that do not support ES6 shorthand properties.

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

Transform shorthand properties

Converts shorthand object properties into regular object properties. For example, `{ foo }` becomes `{"foo": foo}`.

{"foo": foo}

Transform shorthand methods

Converts shorthand method definitions into regular function properties. For example, `{ foo() { return 'bar'; } }` becomes `{"foo": function() { return 'bar'; }}`.

{"foo": function() { return 'bar'; }}

Other packages similar to @babel/plugin-transform-shorthand-properties

@babel/plugin-transform-spread

This plugin transforms the ES6 spread syntax for arrays and objects, which is somewhat related to shorthand properties in that it's part of the object literal syntax enhancements introduced in ES6. However, it serves a different purpose by allowing an iterable to be expanded in places where zero or more arguments or elements are expected.

@babel/plugin-transform-destructuring

This plugin transforms destructuring assignments and rest properties, which are closely related to shorthand properties as they are part of the enhanced object literals in ES6. While @babel/plugin-transform-shorthand-properties focuses on the syntax within object literals, @babel/plugin-transform-destructuring focuses on the syntax used to extract data from arrays or objects.

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

This plugin adds support for the rest and spread properties for object literals to Babel. It is similar to @babel/plugin-transform-shorthand-properties in that it deals with object literals, but it focuses on the spread and rest properties rather than shorthand syntax.

README

@babel/plugin-transform-shorthand-properties

Compile ES2015 shorthand properties to ES5

Example

In

var o = { a, b, c };

Out

var o = { a: a, b: b, c: c };

In

var cat = {
  getName() {
    return name;
  }
};

Out

var cat = {
  getName: function () {
    return name;
  }
};

Installation

npm install --save-dev @babel/plugin-transform-shorthand-properties

Usage

Via .babelrc (Recommended)

.babelrc

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

Via CLI

babel --plugins @babel/plugin-transform-shorthand-properties script.js

Via Node API

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