@babel/plugin-proposal-class-properties

Example

Below is a class with four class properties which will be transformed.

  1.   class Bork {
  2.     //Property initializer syntax
  3.     instanceProperty = "bork";
  4.     boundFunction = () => {
  5.       return this.instanceProperty;
  6.     };
  8.     //Static class properties
  9.     static staticProperty = "babelIsCool";
  10.     static staticFunction = function() {
  11.       return Bork.staticProperty;
  12.     };
  13.   }
  15.   let myBork = new Bork;
  17.   //Property initializers are not on the prototype.
  18.   console.log(myBork.__proto__.boundFunction); // > undefined
  20.   //Bound functions are bound to the class instance.
  21.   console.log(myBork.boundFunction.call(undefined)); // > "bork"
  23.   //Static function exists on the class.
  24.   console.log(Bork.staticFunction()); // > "babelIsCool"

Installation

  1. npm install --save-dev @babel/plugin-proposal-class-properties

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

  1. {
  2.   "plugins": ["@babel/plugin-proposal-class-properties"]
  3. }

With options:

  1. {
  2.   "plugins": [
  3.     ["@babel/plugin-proposal-class-properties", { "loose": true }]
  4.   ]
  5. }

Via CLI

  1. babel --plugins @babel/plugin-proposal-class-properties script.js

Via Node API

  1. require("@babel/core").transform("code", {
  2.   plugins: ["@babel/plugin-proposal-class-properties"]
  3. });

Options

loose

boolean, defaults to false.

When true, class properties are compiled to use an assignment expression instead of Object.defineProperty.

For an explanation of the consequences of using either, see Definition vs. Assignment (TL;DR in Part 5)

Example

  1.   class Bork {
  2.     static a = 'foo';
  3.     static b;
  5.     x = 'bar';
  6.     y;
  7.   }

Without { "loose": true }, the above code will compile to the following, using Object.defineProperty:

  1. var Bork = function Bork() {
  2.   babelHelpers.classCallCheck(this, Bork);
  3.   Object.defineProperty(this, "x", {
  4.     configurable: true,
  5.     enumerable: true,
  6.     writable: true,
  7.     value: 'bar'
  8.   });
  9.   Object.defineProperty(this, "y", {
  10.     configurable: true,
  11.     enumerable: true,
  12.     writable: true,
  13.     value: void 0
  14.   });
  15. };
  17. Object.defineProperty(Bork, "a", {
  18.   configurable: true,
  19.   enumerable: true,
  20.   writable: true,
  21.   value: 'foo'
  22. });
  23. Object.defineProperty(Bork, "b", {
  24.   configurable: true,
  25.   enumerable: true,
  26.   writable: true,
  27.   value: void 0
  28. });

However, with { "loose": true }, it will compile using assignment expressions:

  1. var Bork = function Bork() {
  2.   babelHelpers.classCallCheck(this, Bork);
  3.   this.x = 'bar';
  4.   this.y = void 0;
  5. };
  7. Bork.a = 'foo';
  8. Bork.b = void 0;

You can read more about configuring plugin options here

References