Skip to main content

@babel/plugin-transform-private-methods

info

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
classCounterextendsHTMLElement{
#xValue =0;

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

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

Installation

  • npm
  • Yarn
  • pnpm
  • Bun
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.

note

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.

caution

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
classFoo{
constructor(){
this.publicField=this.#privateMethod();
}

#privateMethod(){
return42;
}
}

By default, this becomes:

JavaScript
varFoo=functionFoo(){
"use strict";

babelHelpers.classCallCheck(this,Foo);

_privateMethod.add(this);

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

var _privateMethod =newWeakSet();

var_privateMethod2=function_privateMethod2(){
return42;
};

With { privateFieldsAsProperties: true }, it becomes:

JavaScript
varFoo=functionFoo(){
"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(){
return42;
};
tip

You can read more about configuring plugin options here

References

AltStyle によって変換されたページ (->オリジナル) /