Babel
  • Docs
  • Setup
  • Try it out
  • Videos
  • Blog
  • Donate
  • Team
  • GitHub

›TC39 Proposals

Extensions

  • React Plugin
  • Flow Plugin
  • Typescript Plugin

Modules

  • AMD
  • Common JS
  • SystemJS
  • UMD

TC39 Proposals

  • class-properties
  • class-static-block
  • decorators
  • do-expressions
  • export-default-from
  • function-bind
  • function-sent
  • partial-application
  • pipeline-operator
  • private-methods
  • private-property-in-object
  • record-and-tuple
  • throw-expressions
  • syntax-top-level-await

@babel/preset-env

    ES2021

    • logical-assignment-operators
    • numeric-separator

    ES2020

    • export-namespace-from
    • nullish-coalescing-operator
    • optional-chaining
    • syntax-bigint
    • syntax-dynamic-import
    • syntax-import-meta

    ES2019

    • optional-catch-binding
    • json-strings

    ES2018

    • async-generator-functions
    • object-rest-spread
    • unicode-property-regex
    • dotall-regex
    • named-capturing-groups-regex

    ES2017

    • async-to-generator

    ES2016

    • exponentiation-operator

    ES2015

    • arrow-functions
    • block-scoping
    • classes
    • computed-properties
    • destructuring
    • duplicate-keys
    • for-of
    • function-name
    • instanceof
    • literals
    • new-target
    • object-super
    • parameters
    • shorthand-properties
    • spread
    • sticky-regex
    • template-literals
    • typeof-symbol
    • unicode-escapes
    • unicode-regex

    ES5

    • property-mutators

    ES3

    • member-expression-literals
    • property-literals
    • reserved-words
Edit

@babel/plugin-proposal-class-properties

NOTE: This plugin is included in @babel/preset-env

Example

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

class Bork {
  //Property initializer syntax
  instanceProperty = "bork";
  boundFunction = () => {
    return this.instanceProperty;
  };

  //Static class properties
  static staticProperty = "babelIsCool";
  static staticFunction = function() {
    return Bork.staticProperty;
  };
}

let myBork = new Bork();

//Property initializers are not on the prototype.
console.log(myBork.__proto__.boundFunction); // > undefined

//Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); // > "bork"

//Static function exists on the class.
console.log(Bork.staticFunction()); // > "babelIsCool"

Installation

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

Usage

With a configuration file (Recommended)

Without options:

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

With options:

{
  "plugins": [["@babel/plugin-proposal-class-properties", { "loose": true }]]
}

Via CLI

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

Via Node API

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

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

class Bork {
  static a = "foo";
  static b;

  x = "bar";
  y;
}

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

var Bork = function Bork() {
  babelHelpers.classCallCheck(this, Bork);
  Object.defineProperty(this, "x", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "bar",
  });
  Object.defineProperty(this, "y", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: void 0,
  });
};

Object.defineProperty(Bork, "a", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: "foo",
});
Object.defineProperty(Bork, "b", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: void 0,
});

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

var Bork = function Bork() {
  babelHelpers.classCallCheck(this, Bork);
  this.x = "bar";
  this.y = void 0;
};

Bork.a = "foo";
Bork.b = void 0;

You can read more about configuring plugin options here

References

  • Proposal: Public and private instance fields
  • Proposal: Static class features
← UMDclass-static-block →
  • Example
  • Installation
  • Usage
    • With a configuration file (Recommended)
    • Via CLI
    • Via Node API
  • Options
    • loose
  • References
Babel
Docs
Learn ES2015
Community
VideosUser ShowcaseStack OverflowSlack ChannelTwitter
More
BlogGitHub OrgGitHub RepoWebsite RepoOld 6.x SiteOld 5.x Site