Skip to main content

@babel/plugin-transform-class-properties

info

这个插件包含在 @babel/preset-env 中，在 ES2022

示例​

🌐 Example

下面是一个具有四个类属性的类，它们将被转换。

🌐 Below is a class with four class properties which will be transformed.

JavaScript
class Bork {
  //Property initializer syntax
  instanceProperty = "bork";
  boundFunction = () => {
    return this.instanceProperty;
  };

  //Static class properties
  static staticProperty = "babelIsCool";
  static staticFunction = function() {
    return Bork.staticProperty;
  };
}

let myBork = new Bork();

//Property initializers are not on the prototype.
console.log(myBork.__proto__.boundFunction); // > undefined

//Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); // > "bork"

//Static function exists on the class.
console.log(Bork.staticFunction()); // > "babelIsCool"

安装​

🌐 Installation

npm install --save-dev @babel/plugin-transform-class-properties

用法​

🌐 Usage

🌐 With a configuration file (Recommended)

没有选项：

🌐 Without options:

babel.config.json
{
  "plugins": ["@babel/plugin-transform-class-properties"]
}

有选项：

🌐 With options:

babel.config.json
{
  "plugins": [["@babel/plugin-transform-class-properties", { "loose": true }]]
}

通过 CLI​

🌐 Via CLI

Shell
babel --plugins @babel/plugin-transform-class-properties script.js

通过 Node API​

🌐 Via Node API

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

选项​

🌐 Options

loose​

boolean，默认值为 false。

当 true 时，类属性会被编译为使用赋值表达式而不是 Object.defineProperty。

🌐 When true, class properties are compiled to use an assignment expression instead of Object.defineProperty.

caution

考虑迁移到顶层 setPublicClassFields 假设

babel.config.json
{
  "assumptions": {
    "setPublicClassFields": true
  }
}

想了解使用其中任何一个的后果，请参见 定义 vs. 赋值（第5部分有简短总结）

🌐 For an explanation of the consequences of using either, see Definition vs. Assignment (TL;DR in Part 5)

示例​

🌐 Example

JavaScript
class Bork {
  static a = "foo";
  static b;

  x = "bar";
  y;
}

当 setPublicClassFields 是 false 时，上面的代码将会编译成使用 Object.defineProperty 的如下内容：

🌐 When setPublicClassFields is false, the above code will compile to the following, using Object.defineProperty:

JavaScript
var Bork = function Bork() {
  babelHelpers.classCallCheck(this, Bork);
  Object.defineProperty(this, "x", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "bar",
  });
  Object.defineProperty(this, "y", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: void 0,
  });
};

Object.defineProperty(Bork, "a", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: "foo",
});
Object.defineProperty(Bork, "b", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: void 0,
});

当 setPublicClassFields 设置为 true 时，它将使用赋值表达式进行编译：

🌐 When setPublicClassFields is set to true, it will compile using assignment expressions:

JavaScript
var Bork = function Bork() {
  babelHelpers.classCallCheck(this, Bork);
  this.x = "bar";
  this.y = void 0;
};

Bork.a = "foo";
Bork.b = void 0;
tip

你可以在这里了解更多关于配置插件选项的内容

参考​

🌐 References