Vai al contenuto principale

@babel/plugin-transform-class-properties

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, nella specifica ES2022

Esempio​

Di seguito è mostrata una classe con quattro proprietà che verranno trasformate.

JavaScript
class Bork {
  //Property initializer syntax
  instanceProperty = "bork";
  boundFunction = () => {
    return this.instanceProperty;
  };

  //Static class properties
  static staticProperty = "babelIsCool";
  static staticFunction = function() {
    return Bork.staticProperty;
  };
}

let myBork = new Bork();

//Property initializers are not on the prototype.
console.log(myBork.__proto__.boundFunction); // > undefined

//Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); // > "bork"

//Static function exists on the class.
console.log(Bork.staticFunction()); // > "babelIsCool"

Installazione​

npm install --save-dev @babel/plugin-transform-class-properties

Utilizzo​

Con un file di configurazione (Consigliato)​

Senza opzioni:

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

Con opzioni:

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

Tramite CLI​

Shell
babel --plugins @babel/plugin-transform-class-properties script.js

Tramite Node API​

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

Opzioni​

loose​

boolean, predefinito false.

Quando impostato a true, le proprietà delle classi vengono compilate utilizzando un'espressione di assegnazione invece di Object.defineProperty.

attenzione

Valuta di migrare all'assunzione di primo livello setPublicClassFields

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

Per una spiegazione delle conseguenze dell'utilizzo di ciascun approccio, consulta Definizione vs. Assegnazione (riassunto nella Parte 5)

Esempio​

JavaScript
class Bork {
  static a = "foo";
  static b;

  x = "bar";
  y;
}

Quando setPublicClassFields è false, il codice sopra verrà compilato nel seguente modo, utilizzando Object.defineProperty:

JavaScript
var Bork = function Bork() {
  babelHelpers.classCallCheck(this, Bork);
  Object.defineProperty(this, "x", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "bar",
  });
  Object.defineProperty(this, "y", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: void 0,
  });
};

Object.defineProperty(Bork, "a", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: "foo",
});
Object.defineProperty(Bork, "b", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: void 0,
});

Quando setPublicClassFields è impostato a true, verrà compilato utilizzando espressioni di assegnazione:

JavaScript
var Bork = function Bork() {
  babelHelpers.classCallCheck(this, Bork);
  this.x = "bar";
  this.y = void 0;
};

Bork.a = "foo";
Bork.b = void 0;
consiglio

Maggiori informazioni sulla configurazione delle opzioni del plugin sono disponibili qui

Riferimenti​