Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@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/plugin-transform-classes"]
}
// with options
{
"plugins": [
["@babel/plugin-transform-classes", {
"loose": true
}]
]
}
babel --plugins @babel/plugin-transform-classes script.js
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-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 20,653,803 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.