Saltar al contenido principal

Preajustes

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 →

Los presets de Babel pueden funcionar como conjuntos compartibles de plugins de Babel y/u opciones de configuración options.

Presets oficiales​

Hemos compilado algunos presets para entornos comunes:

Otras integraciones​

Si no usas Babel directamente, el framework que utilizas podría tener su propia configuración para usar o extender. ¡Muchos otros presets mantenidos por la comunidad están disponibles en npm!

Next.js | Nuxt.js | Parcel | Jest | Gatsby

Usar un preset​

En una configuración de Babel, si el preset está en npm, puedes pasar el nombre del preset y Babel verificará que ya está instalado en node_modules. Esto se añade a la opción de configuración presets, que recibe un array.

babel.config.json
{
  "presets": ["babel-preset-myPreset", "@babel/preset-env"]
}

Alternativamente, también puedes especificar una ruta relativa o absoluta a tus presets.

babel.config.json
{
  "presets": ["./myProject/myPreset"]
}

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

Stage-X (Presets experimentales)​

Obsoleto

A partir de Babel 7, decidimos marcar como obsoletos los presets Stage-X y dejar de publicarlos. Debido a que estas propuestas están sujetas a cambios inherentes, parece mejor pedir a los usuarios que especifiquen propuestas individuales como plugins versus un preset general que de todas formas necesitarías verificar. Consulta nuestro blog para más contexto.

Cualquier transformación en los presets stage-x son cambios en el lenguaje que aún no han sido aprobados para formar parte de una versión de JavaScript (como ES6/ES2015).

El TC39 categoriza las propuestas en las siguientes etapas:

  • Stage 0 - Strawman: solo una idea, posible plugin de Babel.

  • Stage 1 - Propuesta: vale la pena trabajar en esto.

  • Stage 2 - Borrador: especificación inicial.

  • Stage 3 - Candidato: especificación completa e implementaciones iniciales en navegadores.

  • Stage 4 - Finalizado: se agregará en la próxima versión anual.

Para más información, asegúrate de consultar las propuestas actuales de TC39 y su documento de proceso.

El proceso de etapas de TC39 también se explica en detalle en varios artículos de Yehuda Katz (@wycatz) en thefeedbackloop.xyz: Etapa 0 y 1, Etapa 2, Etapa 3

Creación de un Preset​

Para crear tu propio preset (ya sea para uso local o para publicar en npm), necesitas exportar un objeto de configuración.

Podría simplemente devolver un array de plugins.

JavaScript
module.exports = function() {
  return {
    plugins: ["pluginA", "pluginB", "pluginC"],
  };
};

Los presets pueden contener otros presets y plugins con opciones.

JavaScript
module.exports = () => ({
  presets: [require("@babel/preset-env")],
  plugins: [
    [require("@babel/plugin-transform-class-properties"), { loose: true }],
    require("@babel/plugin-transform-object-rest-spread"),
  ],
});

Para más información, consulta la sección sobre presets en el manual de Babel.

Orden de los Presets​

El orden de los presets es inverso (del último al primero).

babel.config.json
{
  "presets": ["a", "b", "c"]
}

Se ejecutarán en el siguiente orden: c, b, luego a.

Esto se implementó principalmente para garantizar compatibilidad con versiones anteriores, ya que la mayoría de usuarios listaba "es2015" antes de "stage-0".

Opciones de Preset​

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
{
  "presets": [
    "presetA", // bare string
    ["presetA"], // wrapped in array
    ["presetA", {}] // 2nd argument is an empty options object
  ]
}

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

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
}