'What is @babel/plugin-transform-classes?
I run Google PageSpeed Insights on my site, and it reports an issue that is "Avoid serving legacy JavaScript to modern browsers", as below:
I have no idea of what is @babel/plugin-transform-classes
, so I search online and it seems babel is a JavaScript compiler and @babel/plugin-transform-classes is a plugin.
But I don't know or install the compiler and the plugin, why there will be such an issue?
Solution 1:[1]
Short answer
- A babel plugin that fix some Javascript errors for legacy browser
- You cannot fix this error on your own, not if you're using Wordpress or any framework at least.
Long answer
What is babel
Babel is a JavaScript compiler which is used by framework to make code understandable for older browser.
What is @babel/plugin-transform-classes
This is a babel plugin, which is included in @babel/preset-env
.
It does
- Transpiles classes using
SuperClass.apply(/* ... */)
, but native classes aren't callable and thus throw in this case.- Some built-in functions (like
Array
) always return a new object. Instead of returning it, Babel should treat it as the new this.
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;
})();
Can I fix this problem on my own?
No, since a lot of library are still using babel, you'll have to wait for them to move on.
So you're safe to ignore this issue.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Raphaël Balet |