'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:

enter image description here

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