@babel/plugin-transform-class-properties
info
This plugin is included in @babel/preset-env
, in ES2022
Example
Below is a class with four class properties which will be transformed.
JavaScript
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
- Yarn
- pnpm
npm install --save-dev @babel/plugin-transform-class-properties
yarn add --dev @babel/plugin-transform-class-properties
pnpm add --save-dev @babel/plugin-transform-class-properties
Usage
With a configuration file (Recommended)
Without options:
babel.config.json
{
"plugins": ["@babel/plugin-transform-class-properties"]
}
With options:
babel.config.json
{
"plugins": [["@babel/plugin-transform-class-properties", { "loose": true }]]
}
Via CLI
Shell
babel --plugins @babel/plugin-transform-class-properties script.js
Via Node API
JavaScript
require("@babel/core").transformSync("code", {
plugins: ["@babel/plugin-transform-class-properties"],
});
Options
loose
boolean
, defaults to false
.
When true
, class properties are compiled to use an assignment expression instead of Object.defineProperty
.
caution
Consider migrating to the top level setPublicClassFields
assumption
babel.config.json
{
"assumptions": {
"setPublicClassFields": true
}
}
For an explanation of the consequences of using either, see Definition vs. Assignment (TL;DR in Part 5)
Example
JavaScript
class Bork {
static a = "foo";
static b;
x = "bar";
y;
}
When setPublicClassFields
is false
, the above code will compile to the following, using Object.defineProperty
:
JavaScript
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,
});
When setPublicClassFields
is set to true
, it will compile using assignment expressions:
JavaScript
var Bork = function Bork() {
babelHelpers.classCallCheck(this, Bork);
this.x = "bar";
this.y = void 0;
};
Bork.a = "foo";
Bork.b = void 0;
tip
You can read more about configuring plugin options here