Saltar al contenido principal

@babel/plugin-transform-private-methods

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

información

Este plugin está incluido en @babel/preset-env, como parte de ES2022

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

Ejemplo​

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++;
  }
}

Instalación​

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

Uso​

Mediante un archivo de configuración (Recomendado)​

Sin opciones:

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

Con opciones:

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

Mediante la CLI​

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

Mediante la API de Node​

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

Opciones​

loose​

boolean, valor predeterminado: false.

nota

La configuración del modo loose debe ser idéntica a la de @babel/plugin-transform-class-properties.

Cuando es true, los métodos privados se asignarán directamente en su elemento padre mediante Object.defineProperty en lugar de un WeakSet. Esto mejora el rendimiento y la depuración (acceso normal a propiedades vs .get()) a costa de posibles fugas de "privados" mediante métodos como Object.getOwnPropertyNames.

precaución

Considera migrar al supuesto de alto nivel privateFieldsAsProperties.

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

Ten en cuenta que tanto privateFieldsAsProperties como setPublicClassFields deben configurarse como true.

Tomemos el siguiente ejemplo:

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

  #privateMethod() {
    return 42;
  }
}

Por defecto, esto se convierte en:

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;
};

Con { privateFieldsAsProperties: true }, se convierte en:

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;
};
consejo

Puedes leer más sobre cómo configurar opciones de plugins aquí

Referencias​