Saltar al contenido principal

@babel/plugin-transform-classes

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

Advertencias​

Al extender una clase nativa (ej. class extends Array {}), la superclase requiere un envoltorio. Esto soluciona dos problemas:

  • Babel transpila clases usando SuperClass.apply(/* ... */), pero las clases nativas no son invocables y lanzan errores en este caso.

  • Algunas funciones integradas (como Array) siempre devuelven un nuevo objeto. En lugar de devolverlo, Babel debe tratarlo como el nuevo this.

El envoltorio funciona en IE11 y cualquier navegador con Object.setPrototypeOf o __proto__ como alternativa. NO hay soporte para IE ≤ 10. Si necesitas IE ≤ 10, se recomienda no extender clases nativas.

Babel necesita conocer estáticamente si estás extendiendo una clase integrada. Por esta razón, el "patrón mixin" no funciona:

JavaScript
class Foo extends mixin(Array) {}

function mixin(Super) {
  return class extends Super {
    mix() {}
  };
}

Para solucionar esta limitación, puedes añadir otra clase en la cadena de herencia para que Babel pueda envolver la clase nativa:

JavaScript
const ExtensibleArray = class extends Array {};

class Foo extends mixin(ExtensibleArray) {}

Ejemplos​

Entrada

JavaScript
class Test {
  constructor(name) {
    this.name = name;
  }

  logger() {
    console.log("Hello", this.name);
  }
}

Salida

JavaScript
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Test = (function() {
  function Test(name) {
    _classCallCheck(this, Test);

    this.name = name;
  }

  Test.prototype.logger = function logger() {
    console.log("Hello", this.name);
  };

  return Test;
})();

Instalación​

npm install --save-dev @babel/plugin-transform-classes

Uso​

Mediante un archivo de configuración (Recomendado)​

JavaScript
// without options
{
  "plugins": ["@babel/plugin-transform-classes"]
}

// with options
{
  "plugins": [
    ["@babel/plugin-transform-classes", {
      "loose": true
    }]
  ]
}

Mediante la CLI​

Shell
babel --plugins @babel/plugin-transform-classes script.js

Mediante la API de Node​

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

Opciones​

loose​

boolean, valor predeterminado: false.

precaución

Considera migrar a assumptions de nivel superior que ofrece control granular sobre las deducciones del modo loose aplicadas por Babel.

babel.config.json
{
  "assumptions": {
    "constantSuper": true,
    "noClassCalls": true,
    "setClassMethods": true,
    "superIsCallableConstructor": true
  }
}

Enumerabilidad de métodos​

Ten en cuenta que en modo loose los métodos de clase son enumerables. Esto no cumple con la especificación y podrías encontrarte con problemas.

Asignación de métodos​

En modo loose, los métodos se definen en el prototipo de la clase mediante asignaciones simples en lugar de definiciones. Esto puede causar que el siguiente caso no funcione:

JavaScript
class Foo {
  set bar() {
    throw new Error("foo!");
  }
}

class Bar extends Foo {
  bar() {
    // will throw an error when this method is defined
  }
}

Cuando se define Bar.prototype.foo se activa el setter en Foo. Es un caso muy improbable en código de producción, pero conviene tenerlo presente.

consejo

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