跳到主要内容

@babel/plugin-transform-private-methods

信息

This plugin is included in @babel/preset-env, in ES2022

History
VersionChanges
v7.3.0Support private accessors (getters and setters)
v7.2.0Initial Release

Example​

JavaScript
class Counter extends HTMLElement {
  #xValue = 0;

  get #x() {
    return this.#xValue;
  }
  set #x(value) {
    this.#xValue = value;
    window.requestAnimationFrame(this.#render.bind(this));
  }

  #clicked() {
    this.#x++;
  }
}

Installation​

npm install @babel/plugin-transform-private-methods --save-dev

Usage​

Without options:

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

With options:

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

Via CLI​

Shell
$ babel --plugins @babel/plugin-transform-private-methods script.js

Via Node API​

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

Options​

loose​

boolean, defaults to false.

备注

The loose mode configuration setting must be the same as @babel/plugin-transform-class-properties.

When true, private methods will be assigned directly on its parent via Object.defineProperty rather than a WeakSet. This results in improved performance and debugging (normal property access vs .get()) at the expense of potentially leaking "privates" via things like Object.getOwnPropertyNames.

警告

Consider migrating to the top level privateFieldsAsProperties assumption.

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

Note that both privateFieldsAsProperties and setPublicClassFields must be set to true.

Let's use the following as an example:

JavaScript
class Foo {
  constructor() {
    this.publicField = this.#privateMethod();
  }

  #privateMethod() {
    return 42;
  }
}

By default, this becomes:

JavaScript
var Foo = function Foo() {
  "use strict";

  babelHelpers.classCallCheck(this, Foo);

  _privateMethod.add(this);

  this.publicField = babelHelpers
    .classPrivateMethodGet(this, _privateMethod, _privateMethod2)
    .call(this);
};

var _privateMethod = new WeakSet();

var _privateMethod2 = function _privateMethod2() {
  return 42;
};

With { privateFieldsAsProperties: true }, it becomes:

JavaScript
var Foo = function Foo() {
  "use strict";

  babelHelpers.classCallCheck(this, Foo);
  Object.defineProperty(this, _privateMethod, {
    value: _privateMethod2,
  });
  this.publicField = babelHelpers
    .classPrivateFieldLooseBase(this, _privateMethod)
    [_privateMethod]();
};

var _privateMethod = babelHelpers.classPrivateFieldLooseKey("privateMethod");

var _privateMethod2 = function _privateMethod2() {
  return 42;
};
提示

You can read more about configuring plugin options here

References​