@babel/plugin-proposal-private-property-in-object

2023-06-08 16:06 更新

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

Example

JavaScript

class Foo {
  #bar = "bar";

  test(obj) {
    return #bar in obj;
  }
}

Out

JavaScript

class Foo {
  constructor() {
    _bar.set(this, {
      writable: true,
      value: "bar",
    });
  }

  test() {
    return _bar.has(this);
  }
}

var _bar = new WeakMap();

Installation

npm
Yarn
pnpm

pnpm add --save-dev @babel/plugin-proposal-private-property-in-object

Usage

With a configuration file (Recommended)

babel.config.json

{
  "plugins": ["@babel/plugin-proposal-private-property-in-object"]
}

Via CLI

Shell

babel --plugins @babel/plugin-proposal-private-property-in-object

Via Node API

JavaScript

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

Options

loose

boolean, defaults to false.

Note: The loose mode configuration setting must be the same as @babel/proposal-class-properties.

When true, private property in expressions will check own properties (as opposed to inherited ones) on the object, instead of checking for presence inside 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.

Example

JavaScript

class Foo {
  #bar = "bar";

  test(obj) {
    return #bar in obj;
  }
}

Out

JavaScript

class Foo {
  constructor() {
    Object.defineProperty(this, _bar, {
      writable: true,
      value: "bar",
    });
  }

  test() {
    return Object.prototype.hasOwnProperty.call(this, _bar);
  }
}

var _bar = babelHelpers.classPrivateFieldLooseKey("bar");