@babel/plugin-proposal-private-methods

2023-06-08 16:05 更新
NOTE: This plugin is included in @babel/preset-env, in ES2022
History

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
  • Yarn
  • pnpm
pnpm add @babel/plugin-proposal-private-methods --save-dev

Usage

With a configuration file (Recommended)

Without options:

babel.config.json

{
"plugins": ["@babel/plugin-proposal-private-methods"]
}

With options:

babel.config.json

{
"plugins": [["@babel/plugin-proposal-private-methods", { "loose": true }]]
}

Via CLI

Shell

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

Via Node API

JavaScript

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

Options

loose

boolean, defaults to false.

Note: The loose mode configuration setting must be the same as @babel/plugin-proposal-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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号