javascriptbabeljsgoogle-pagespeedpagespeed-insights

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

  • Short answer

    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.