Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@babel/plugin-transform-classes
Advanced tools
The @babel/plugin-transform-classes package is a plugin for Babel that transforms ES2015+ class syntax into equivalent ES5 code. This is useful for ensuring compatibility with environments that do not support the latest JavaScript features.
Class transformation
Transforms ES2015+ class syntax into equivalent ES5 constructor functions with prototype methods.
{"class MyClass { constructor(name) { this.name = name; } greet() { return 'Hello, ' + this.name; } } }
Super calls
Handles 'super' calls and transforms them into appropriate ES5 code that calls the parent class constructor or methods.
{"class ChildClass extends ParentClass { constructor(name) { super(name); } } }
Static methods
Transforms static methods in classes to static methods on the constructor function in ES5.
{"class MyClass { static myStaticMethod() { return 'I am static'; } } }
Instance properties
Transforms class instance properties into assignments within the constructor function.
{"class MyClass { myProperty = 'default value'; } }
Transforms ES2015+ arrow functions into equivalent ES5 function expressions. Similar in that it provides transformation of modern JavaScript features to ES5, but focuses on arrow functions instead of classes.
Transforms ES2015+ destructuring assignments and parameters into equivalent ES5 code. Similar in that it provides transformation of modern JavaScript syntax to ES5, but focuses on destructuring rather than class syntax.
Transforms ES2015+ spread syntax for arrays and function calls into equivalent ES5 code. Similar in that it provides transformation of modern JavaScript features to ES5, but focuses on spread syntax instead of class syntax.
Compile ES2015 classes to ES5
Built-in classes such as Date
, Array
, DOM
etc cannot be properly subclassed
due to limitations in ES5 (for the classes plugin).
You can try to use babel-plugin-transform-builtin-extend based on Object.setPrototypeOf
and Reflect.construct
, but it also has some limitations.
In
class Test {
constructor(name) {
this.name = name;
}
logger () {
console.log("Hello", this.name);
}
}
Out
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Test = function () {
function Test(name) {
_classCallCheck(this, Test);
this.name = name;
}
Test.prototype.logger = function logger() {
console.log("Hello", this.name);
};
return Test;
}();
npm install --save-dev @babel/plugin-transform-classes
.babelrc
(Recommended).babelrc
// without options
{
"plugins": ["@babel/transform-classes"]
}
// with options
{
"plugins": [
["@babel/transform-classes", {
"loose": true
}]
]
}
babel --plugins @babel/transform-classes script.js
require("@babel/core").transform("code", {
plugins: ["@babel/transform-classes"]
});
loose
boolean
, defaults to false
.
Please note that in loose mode class methods are enumerable. This is not in line with the spec and you may run into issues.
Under loose mode, methods are defined on the class prototype with simple assignments instead of being defined. This can result in the following not working:
class Foo {
set bar() {
throw new Error("foo!");
}
}
class Bar extends Foo {
bar() {
// will throw an error when this method is defined
}
}
When Bar.prototype.foo
is defined it triggers the setter on Foo
. This is a
case that is very unlikely to appear in production code however it's something
to keep in mind.
FAQs
Compile ES2015 classes to ES5
The npm package @babel/plugin-transform-classes receives a total of 21,023,184 weekly downloads. As such, @babel/plugin-transform-classes popularity was classified as popular.
We found that @babel/plugin-transform-classes demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.