Plugins

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 →

Las transformaciones de código de Babel se habilitan aplicando plugins (o presets) en tu archivo de configuración.

Usando un Plugin

Si el plugin está en npm, puedes pasar el nombre del plugin y Babel verificará que esté instalado en node_modules. Esto se agrega a la opción de configuración plugins, que acepta un array.

babel.config.json

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

También puedes especificar una ruta relativa o absoluta a tu plugin.

babel.config.json

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

Consulta la normalización de nombres para más detalles sobre cómo configurar la ruta de un plugin o preset.

Plugins de Transformación

Estos plugins aplican transformaciones a tu código.

información

Los plugins de transformación habilitan automáticamente el plugin de sintaxis correspondiente, así que no necesitas especificar ambos.

Plugins de Sintaxis

La mayoría de la sintaxis es transformable por Babel. En casos raros (si la transformación aún no está implementada o no hay una forma predeterminada de hacerlo), puedes usar plugins como @babel/plugin-syntax-bigint para permitir que Babel solo analice tipos específicos de sintaxis. O cuando quieras preservar el código fuente porque solo necesitas que Babel realice análisis de código o codemods.

consejo

No necesitas especificar el plugin de sintaxis si ya se usa el plugin de transformación correspondiente, ya que lo habilita automáticamente.

Alternativamente, también puedes proporcionar cualquier opción plugins del analizador sintáctico de Babel:

Tu .babelrc:

JSON

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

Orden de los Plugins

El orden es importante para cada visitante (visitor) en el plugin.

Esto significa que si dos transformaciones visitan el nodo "Program", las transformaciones se ejecutarán en el orden de los plugins o presets.

• Los plugins se ejecutan antes que los Presets.

• El orden de los plugins es de primero a último.

• El orden de los presets es inverso (de último a primero).

Por ejemplo:

babel.config.json

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

Ejecutará transform-decorators-legacy primero y luego transform-class-properties.

Es importante recordar que con los presets, el orden es invertido. Lo siguiente:

babel.config.json

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

Se ejecutará en este orden: primero @babel/preset-react y luego @babel/preset-env.

Opciones de Plugins

Tanto plugins como presets pueden tener opciones especificadas envolviendo el nombre y un objeto de opciones en un array dentro de tu configuración.

Para especificar sin opciones, todas estas formas son equivalentes:

babel.config.json

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

Para especificar una opción, pasa un objeto con las claves como nombres de opción.

babel.config.json

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

Configurar opciones para presets funciona exactamente igual:

babel.config.json

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

Desarrollo de Plugins

Consulta el excelente babel-handbook para aprender a crear tus propios plugins.

El plugin simple que invierte nombres (de la página principal):

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