Babel 中文文档
  • 印记中文
  • 文档
  • 配置
  • 试用
  • 视频
  • 博客
  • 赞助
  • 团队
  • GitHub

›TC39 提案

扩展

  • React Plugin
  • Flow Plugin
  • Typescript Plugin

模块

  • AMD
  • Common JS
  • SystemJS
  • UMD

TC39 提案

  • async-do-expressions
  • decorators
  • do-expressions
  • export-default-from
  • function-bind
  • function-sent
  • partial-application
  • pipeline-operator
  • private-methods
  • record-and-tuple
  • throw-expressions

@babel/preset-env

    ES2022

    • class-properties
    • class-static-block
    • private-property-in-object
    • syntax-top-level-await

    ES2021

    • logical-assignment-operators
    • numeric-separator

    ES2020

    • export-namespace-from
    • nullish-coalescing-operator
    • optional-chaining
    • syntax-bigint
    • syntax-dynamic-import
    • syntax-import-meta

    ES2019

    • optional-catch-binding
    • json-strings

    ES2018

    • async-generator-functions
    • object-rest-spread
    • unicode-property-regex
    • dotall-regex
    • named-capturing-groups-regex

    ES2017

    • async-to-generator

    ES2016

    • exponentiation-operator

    ES2015

    • arrow-functions
    • block-scoping
    • classes
    • computed-properties
    • destructuring
    • duplicate-keys
    • for-of
    • function-name
    • instanceof
    • literals
    • new-target
    • object-super
    • parameters
    • shorthand-properties
    • spread
    • sticky-regex
    • template-literals
    • typeof-symbol
    • unicode-escapes
    • unicode-regex

    ES5

    • property-mutators

    ES3

    • member-expression-literals
    • property-literals
    • reserved-words
Edit

@babel/plugin-proposal-private-methods

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

History

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

Example

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-proposal-private-methods --save-dev

Usage

With a configuration file (Recommended)

Without options:

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

With options:

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

Via CLI

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

Via Node API

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:

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

  #privateMethod() {
    return 42;
  }
}

By default, this becomes:

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:

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

  • Proposal: Private methods and getter/setters for JavaScript classes
← pipeline-operatorrecord-and-tuple →
  • Example
  • Installation
  • Usage
    • With a configuration file (Recommended)
    • Via CLI
    • Via Node API
  • Options
    • loose
  • References
Babel 中文文档
文档
学习 ES2015
社区
视频用户Stack OverflowSlack 频道Twitter
更多
博客GitHub 组织GitHub 仓库Website 仓库旧版网址 6.x旧版网址 5.x