什么是@babel/plugin-transform-classes？

Question

我在我的网站上运行 Google PageSpeed Insights，它报告了一个问题“避免向现代浏览器提供旧版 JavaScript”，如下所示：

我不知道什么是

@babel/plugin-transform-classes

，所以我在网上搜索，似乎babel是一个JavaScript编译器，而@babel/plugin-transform-classes是一个plugin。

但是我不知道也不安装编译器和插件，为什么会出现这样的问题？

Answer 1

简短回答

• 一个babel插件，修复一些Javascript旧版浏览器的错误
• 您无法自行修复此错误，至少如果您使用 Wordpress 或任何框架则不行。

长答案

什么是巴别塔

Babel 是一个 JavaScript 编译器，框架使用它来使旧版浏览器可以理解代码。

什么是@babel/plugin-transform-classes

这是一个babel插件，它包含在

@babel/preset-env

中。

确实如此

• 使用

  SuperClass.apply(/* ... */)

  转换类，但本机类不可调用，因此会在这种情况下抛出。
• 一些内置函数（如

  Array

  ）总是返回一个新对象。 Babel 应该将其视为新的 this，而不是返回它。

在

class Test {
  constructor(name) {
    this.name = name;
  }

  logger() {
    console.log("Hello", this.name);
  }
}

出

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;
})();

我可以自己解决这个问题吗？

不，因为很多图书馆仍在使用 babel，你必须等待他们继续前进。

所以你可以放心地忽略这个问题。

Answer 2

您可以通过在项目中配置来排除此插件。这将导致 webpack 在编译期间跳过转换类步骤。

// package.json

"babel": {
  "presets": [
    ["@babel/preset-env", { "exclude": ["@babel/plugin-transform-classes"] }]
  ]
},

但是，请注意，正如Balet前面提到的，此配置仅影响您自己的代码，我们无法控制透明依赖项。