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?

Answer

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.