Plugins

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 →

Les transformations de code de Babel sont activées en appliquant des plugins (ou des préréglages) à votre fichier de configuration.

Utiliser un plugin

Si le plugin est sur npm, vous pouvez passer son nom et Babel vérifiera qu'il est installé dans node_modules. Cela s'ajoute à l'option de configuration plugins, qui prend un tableau.

babel.config.json

{
  "plugins": ["babel-plugin-myPlugin", "@babel/plugin-transform-runtime"]
}

Vous pouvez également spécifier un chemin relatif ou absolu vers votre plugin.

babel.config.json

{
  "plugins": ["./node_modules/asdf/plugin"]
}

Consultez la normalisation des noms pour plus de détails sur la configuration du chemin d'un plugin ou préréglage.

Plugins de transformation

Ces plugins appliquent des transformations à votre code.

info

Les plugins de transformation activeront automatiquement le plugin de syntaxe correspondant, vous n'avez donc pas besoin de spécifier les deux.

Plugins de syntaxe

La plupart des syntaxes sont transformables par Babel. Dans des cas plus rares (si la transformation n'est pas encore implémentée ou s'il n'existe pas de méthode par défaut), vous pouvez utiliser des plugins comme @babel/plugin-syntax-bigint pour permettre à Babel uniquement d'analyser des types de syntaxe spécifiques. Ou si vous souhaitez préserver le code source parce que vous voulez que Babel effectue uniquement de l'analyse de code ou des codemods.

astuce

Vous n'avez pas besoin de spécifier le plugin de syntaxe si le plugin de transformation correspondant est déjà utilisé, car il l'active automatiquement.

Alternativement, vous pouvez aussi fournir n'importe quelle option plugins de l'analyseur Babel :

Votre .babelrc :

JSON

{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}

Ordre des plugins

L'ordre est important pour chaque visiteur dans le plugin.

Cela signifie que si deux transformations accèdent toutes deux au nœud "Program", les transformations s'exécuteront selon l'ordre des plugins ou des préréglages.

• Les plugins s'exécutent avant les préréglages.

• L'ordre des plugins est du premier au dernier.

• L'ordre des préréglages est inversé (du dernier au premier).

Par exemple :

babel.config.json

{
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

Exécutera d'abord transform-decorators-legacy puis transform-class-properties.

Il est important de retenir qu'avec les préréglages, l'ordre est inversé. Par exemple :

babel.config.json

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

S'exécutera dans l'ordre suivant : @babel/preset-react puis @babel/preset-env.

Options des plugins

Les plugins et préréglages peuvent tous deux avoir des options spécifiées en encapsulant le nom et un objet d'options dans un tableau dans votre configuration.

Pour spécifier aucune option, ces formulations sont équivalentes :

babel.config.json

{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

Pour spécifier une option, passez un objet avec les clés correspondant aux noms des options.

babel.config.json

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}

Définir des options pour les préréglages fonctionne exactement de la même manière :

babel.config.json

{
  "presets": [
    [
      "env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
}

Développement de plugins

Veuillez consulter l'excellent babel-handbook pour apprendre à créer vos propres plugins.

Le plugin simple qui inverse les noms (depuis la page d'accueil) :

JavaScript

export default function() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name
          .split("")
          .reverse()
          .join("");
      },
    },
  };
}