Package Exports
- @babel/plugin-proposal-class-properties
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@babel/plugin-proposal-class-properties) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@babel/plugin-proposal-class-properties
This plugin transforms class properties
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-propertiesUsage
Via .babelrc (Recommended)
.babelrc
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.jsVia Node API
require("@babel/core").transform("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.
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;