跳转到主要内容

@babel/plugin-transform-classes

信息

此插件包含在 @babel/preset-env 中

注意事项​

当继承原生类时（例如，class extends Array {}），需要包装超类。这是为了解决两个问题

  • Babel 使用 SuperClass.apply(/* ... */) 来转译类，但原生类不可调用，因此在这种情况下会抛出错误。
  • 一些内置函数（如 Array）总是返回一个新对象。Babel 应该将其视为新的 this，而不是返回它。

该包装器适用于 IE11 和所有其他使用 Object.setPrototypeOf 或 __proto__ 作为回退的浏览器。**不支持 IE ≤ 10**。如果您需要支持 IE ≤ 10，建议您不要扩展原生类。

Babel 需要静态地知道您是否正在扩展内置类。因此，“mixin 模式”不起作用

JavaScript
class Foo extends mixin(Array) {}

function mixin(Super) {
  return class extends Super {
    mix() {}
  };
}

要解决此限制，您可以在继承链中添加另一个类，以便 Babel 可以包装原生类

JavaScript
const ExtensibleArray = class extends Array {};

class Foo extends mixin(ExtensibleArray) {}

示例​

输入

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

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

输出

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

安装​

npm install --save-dev @babel/plugin-transform-classes

用法​

JavaScript
// without options
{
  "plugins": ["@babel/plugin-transform-classes"]
}

// with options
{
  "plugins": [
    ["@babel/plugin-transform-classes", {
      "loose": true
    }]
  ]
}

通过 CLI​

Shell
babel --plugins @babel/plugin-transform-classes script.js

通过 Node API​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-classes"],
});

选项​

loose​

boolean，默认为 false。

注意

请考虑迁移到顶级的 assumptions，它提供了对 Babel 应用的各种 loose 模式推断的精细控制。

babel.config.json
{
  "assumptions": {
    "constantSuper": true,
    "noClassCalls": true,
    "setClassMethods": true,
    "superIsCallableConstructor": true
  }
}

方法可枚举性​

请注意，在宽松模式下，类方法**是**可枚举的。这不符合规范，您可能会遇到问题。

方法赋值​

在宽松模式下，方法是在类原型上使用简单赋值定义的，而不是使用 defineProperty 定义的。这可能会导致以下情况不起作用

JavaScript
class Foo {
  set bar() {
    throw new Error("foo!");
  }
}

class Bar extends Foo {
  bar() {
    // will throw an error when this method is defined
  }
}

当定义 Bar.prototype.foo 时，它会触发 Foo 上的 setter。这种情况在生产代码中不太可能出现，但需要牢记。

提示

您可以在 此处 阅读有关配置插件选项的更多信息