Aller au contenu principal

@babel/plugin-transform-classes

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

info

Ce plugin est inclus dans @babel/preset-env

Mises en garde​

Lors de l'extension d'une classe native (ex. class extends Array {}), la superclasse doit être encapsulée. Ceci est nécessaire pour contourner deux problèmes :

  • Babel transpile les classes via SuperClass.apply(/* ... */), mais les classes natives ne sont pas appelables et génèrent donc une erreur dans ce cas.

  • Certaines fonctions intégrées (comme Array) retournent toujours un nouvel objet. Plutôt que de le retourner, Babel doit le traiter comme le nouveau this.

L'encapsulation fonctionne sur IE11 et tout navigateur disposant d'Object.setPrototypeOf ou de __proto__ en repli. Il n'existe AUCUNE prise en charge pour IE ≤ 10. Si IE ≤ 10 est requis, il est recommandé de ne pas étendre les natives.

Babel doit statiquement savoir si vous étendez une classe intégrée. Pour cette raison, le "mixin pattern" ne fonctionne pas :

JavaScript
class Foo extends mixin(Array) {}

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

Pour contourner cette limitation, ajoutez une classe intermédiaire dans la chaîne d'héritage afin que Babel puisse encapsuler la classe native :

JavaScript
const ExtensibleArray = class extends Array {};

class Foo extends mixin(ExtensibleArray) {}

Exemples​

Entrée

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

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

Sortie

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

Installation​

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

Utilisation​

Avec un fichier de configuration (Recommandé)​

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

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

Via CLI​

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

Via l'API Node​

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

Options​

loose​

boolean, valeur par défaut : false.

attention

Envisagez de migrer vers assumptions de niveau supérieur, qui offre un contrôle granulaire sur les diverses déductions du mode loose appliquées par Babel.

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

Énumérabilité des méthodes​

Notez qu'en mode loose, les méthodes de classe sont énumérables. Ceci n'est pas conforme à la spécification et peut causer des problèmes.

Assignation des méthodes​

En mode loose, les méthodes sont assignées au prototype de la classe via des affectations simples plutôt qu'être définies. Ceci peut empêcher le fonctionnement de cas comme :

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

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

Lorsque Bar.prototype.foo est défini, il déclenche le setter sur Foo. Ce cas est très improbable en production, mais mérite d'être gardé à l'esprit.

astuce

Vous pouvez en savoir plus sur la configuration des options de plugin ici