Vai al contenuto principale

@babel/plugin-transform-classes

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

informazioni

Questo plugin è incluso in @babel/preset-env

Avvertenze​

Quando si estende una classe nativa (ad esempio class extends Array {}), la superclasse deve essere wrappata. Questo è necessario per aggirare due problemi:

  • Babel transpila le classi usando SuperClass.apply(/* ... */), ma le classi native non sono chiamabili e quindi generano un errore in questo caso.

  • Alcune funzioni integrate (come Array) restituiscono sempre un nuovo oggetto. Invece di restituirlo, Babel dovrebbe trattarlo come il nuovo this.

Il wrapper funziona su IE11 e tutti gli altri browser che supportano Object.setPrototypeOf o __proto__ come fallback. Non esiste supporto per IE ≤ 10. Se necessiti IE ≤ 10 si raccomanda di non estendere classi native.

Babel deve conoscere staticamente se stai estendendo una classe integrata. Per questo motivo, il "mixin pattern" non funziona:

JavaScript
class Foo extends mixin(Array) {}

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

Per aggirare questa limitazione, puoi aggiungere un'altra classe nella catena di ereditarietà in modo che Babel possa wrappare la classe nativa:

JavaScript
const ExtensibleArray = class extends Array {};

class Foo extends mixin(ExtensibleArray) {}

Esempi​

In

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

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

Out

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

Installazione​

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

Utilizzo​

Con un file di configurazione (Consigliato)​

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

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

Tramite CLI​

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

Tramite Node API​

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

Opzioni​

loose​

boolean, predefinito false.

attenzione

Considera di migrare alle assumptions di alto livello che offrono un controllo granulare sulle varie deduzioni applicate da Babel in modalità loose.

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

Enumerabilità dei metodi​

Nota che in modalità loose i metodi delle classi sono enumerabili. Questo non è conforme alle specifiche e potresti riscontrare problemi.

Assegnazione dei metodi​

In modalità loose, i metodi sono definiti sul prototipo della classe tramite semplici assegnazioni invece di essere definiti. Ciò può causare malfunzionamenti nel seguente scenario:

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

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

Quando Bar.prototype.foo viene definito, attiva il setter su Foo. Questo è un caso molto improbabile nel codice di produzione, ma è comunque qualcosa da tenere presente.

consiglio

Maggiori informazioni sulla configurazione delle opzioni del plugin sono disponibili qui