Configurar Babel

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 →

¡Babel se puede configurar! Muchas otras herramientas tienen configuraciones similares: ESLint (.eslintrc), Prettier (.prettierrc).

Se permiten todas las opciones de la API de Babel. Sin embargo, si la opción requiere JavaScript, quizá quieras usar un archivo de configuración en JavaScript.

¿Cuál es tu caso de uso?

¿Estás usando un monorepo?
¿Quieres compilar node_modules?

babel.config.json es para ti

¿Tienes una configuración que solo aplica a una parte de tu proyecto?

.babelrc.json es para ti

¿Es Guy Fieri tu héroe?

Recomendamos usar el formato babel.config.json

`babel.config.json`

Crea un archivo llamado babel.config.json con el siguiente contenido en la raíz de tu proyecto (donde está el package.json).

babel.config.json
{
  "presets": [...],
  "plugins": [...]
}

Consulta la documentación de babel.config.json para ver más opciones de configuración.

`.babelrc.json`

Crea un archivo llamado .babelrc.json con el siguiente contenido en tu proyecto.

.babelrc.json
{
  "presets": [...],
  "plugins": [...]
}

Consulta la documentación de .babelrc para ver más opciones de configuración.

`package.json`

Alternativamente, puedes especificar tu configuración de .babelrc.json dentro de package.json usando la clave babel así:

package.json
{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

Archivos de configuración JavaScript

También puedes escribir babel.config.js (como hacemos nosotros) y .babelrc.js usando JavaScript:

babel.config.js
module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

Tienes permitido acceder a cualquier API de Node.js, por ejemplo para una configuración dinámica basada en el entorno del proceso:

babel.config.js
module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  if (process.env["ENV"] === "prod") {
    plugins.push(...);
  }

  return {
    presets,
    plugins
  };
}

Puedes leer más sobre archivos de configuración JavaScript en la documentación dedicada

Uso de la CLI (`@babel/cli`)

Shell
babel --plugins @babel/plugin-transform-arrow-functions script.js

Consulta la documentación de babel-cli para ver más opciones de configuración.

Uso de la API (`@babel/core`)

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

Consulta la documentación de babel-core para ver más opciones de configuración.

Imprimir configuraciones efectivas

Puedes indicar a Babel que imprima las configuraciones efectivas para una ruta de entrada específica

Shell
powershell

# *nix or WSL
BABEL_SHOW_CONFIG_FOR=./src/myComponent.jsx npm start

$env:BABEL_SHOW_CONFIG_FOR = ".\src\myComponent.jsx"; npm start

BABEL_SHOW_CONFIG_FOR acepta rutas de archivo tanto absolutas como relativas. Si es una ruta relativa, se resolverá desde cwd.

Una vez que Babel procese el archivo de entrada especificado por BABEL_SHOW_CONFIG_FOR, imprimirá las configuraciones efectivas en la consola. Este es un ejemplo de salida:

Babel configs on "/path/to/cwd/src/index.js" (ascending priority):
config /path/to/cwd/babel.config.json
{
  "sourceType": "script",
  "plugins": [
    "@foo/babel-plugin-1"
  ],
  "extends": "./my-extended.js"
}

config /path/to/cwd/babel.config.json .env["test"]
{
  "plugins": [
    [
      "@foo/babel-plugin-3",
      {
        "noDocumentAll": true
      },
    ]
  ]
}

config /path/to/cwd/babel.config.json .overrides[0]
{
  "test": "src/index.js",
  "sourceMaps": true
}

config /path/to/cwd/.babelrc
{}

programmatic options from @babel/cli
{
  "sourceFileName": "./src/index.js",
  "presets": [
    "@babel/preset-env"
  ],
  "configFile": "./my-config.js",
  "caller": {
    "name": "@babel/cli"
  },
  "filename": "./src/index.js"
}

Babel imprimirá las fuentes de configuración efectivas ordenadas por prioridad ascendente. Usando el ejemplo anterior, la prioridad es:

babel.config.json < .babelrc < programmatic options from @babel/cli

En otras palabras, babel.config.json es sobrescrito por .babelrc, y .babelrc es sobrescrito por opciones programáticas.

Para cada fuente de configuración, Babel imprime los elementos de configuración aplicables (como overrides y env) en orden de prioridad ascendente. Generalmente cada fuente de configuración tiene al menos un elemento: el contenido raíz de la configuración. Si has configurado overrides o env, Babel no los imprimirá en la raíz, sino que mostrará un elemento separado titulado como .overrides[index], donde index es la posición del elemento. Esto ayuda a determinar si el elemento es efectivo para la entrada y qué configuraciones reemplazará.

Si tu entrada es ignorada por ignore u only, Babel indicará que este archivo se ignora.

Cómo Babel combina elementos de configuración

La combinación de configuraciones en Babel es relativamente directa. Las opciones sobrescribirán las existentes cuando están presentes y su valor no es undefined. Sin embargo, hay algunas excepciones:

Para assumptions, parserOpts y generatorOpts, los objetos se fusionan en lugar de reemplazarse.
Para plugins y presets, se reemplazan basándose en la identidad del plugin/preset (objeto/función) combinado con el nombre de la entrada.

Combinación de opciones (excepto plugins/presets)

Por ejemplo, considera una configuración con:

JavaScript
{
  sourceType: "script",
  assumptions: {
    setClassFields: true,
    iterableIsArray: false
  },
  env: {
    test: {
      sourceType: "module",
      assumptions: {
        iterableIsArray: true,
      },
    }
  }
};

Cuando NODE_ENV es test, la opción sourceType se reemplazará y assumptions se fusionará. La configuración efectiva será:

JavaScript
{
  sourceType: "module", // sourceType: "script" is overwritten
  assumptions: {
    setClassFields: true,
    iterableIsArray: true, // assumptions are merged by Object.assign
  },
}

Combinación de plugins/presets

Por ejemplo, considera una configuración con:

JavaScript
plugins: [
  './other',
  ['./plug', { thing: true, field1: true }]
],
overrides: [{
  plugins: [
    ['./plug', { thing: false, field2: true }],
  ]
}]

El elemento overrides se fusionará sobre las opciones de nivel superior. Importante: el array de plugins no reemplaza simplemente el de nivel superior. La lógica de fusión detectará que "./plug" es el mismo plugin en ambos casos, y { thing: false, field2: true } reemplazará las opciones originales, resultando en:

JavaScript
plugins: [
  './other',
  ['./plug', { thing: false, field2: true }],
],

Dado que la fusión se basa en identidad + nombre, se considera un error usar el mismo plugin con el mismo nombre dos veces en el mismo array de plugins/presets. Por ejemplo:

JavaScript
plugins: ["./plug", "./plug"];

se considera un error porque es idéntico a plugins: ['./plug']. Incluso:

JavaScript
plugins: [["./plug", { one: true }], ["./plug", { two: true }]];

es un error porque el segundo siempre reemplazaría al primero.

Si realmente necesitas instanciar dos instancias separadas de un plugin, debes asignar a cada una un nombre único para diferenciarlas. Por ejemplo:

JavaScript
plugins: [
  ["./plug", { one: true }, "first-instance-name"],
  ["./plug", { two: true }, "second-instance-name"],
];

funciona porque cada instancia tiene un nombre único y por tanto una identidad distinta.

¿Cuál es tu caso de uso?​

babel.config.json​

.babelrc.json​

package.json​

Archivos de configuración JavaScript​

Uso de la CLI (@babel/cli)​

Uso de la API (@babel/core)​

Imprimir configuraciones efectivas​

Cómo Babel combina elementos de configuración​

Combinación de opciones (excepto plugins/presets)​

Combinación de plugins/presets​