Saltar al contenido principal

7.11.0 Lanzado: Soporte para ECMAScript 2021 en preset-env, TypeScript 4.0, impresión de configuración y el futuro de `babel-eslint`

· 6 min de lectura
Huáng Jùnliàng
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 →

¡Acabamos de publicar una nueva versión menor de Babel!

Esta versión 7.11 incluye:

  • Soporte en preset-env para Asignaciones Lógicas (??=), Separadores Numéricos (1_2) y Reexportación de Namespaces (export * as ns from ...)

  • Soporte para TypeScript 4.0

  • Soporte en el parser para la propuesta en Etapa 1 de Decimal (7.11m)

  • Una bandera de entorno para imprimir la configuración de Babel resuelta para un archivo (BABEL_SHOW_CONFIG_FOR)

Adicionalmente, ¡lanzamos el sucesor de babel-eslint: @babel/eslint-parser!

Puedes leer el registro completo de cambios en GitHub.

Si tienes preguntas o temas para discutir, ¡hemos habilitado Discusiones en GitHub en nuestro repositorio!

Si tú o tu empresa quieren apoyar a Babel y la evolución de JavaScript, pero no están seguros de cómo hacerlo, pueden donar a través de nuestro Open Collective y, mejor aún, ¡colaborar directamente con nosotros en la implementación de nuevas propuestas de ECMAScript! Como proyecto impulsado por voluntarios, dependemos del apoyo de la comunidad para financiar nuestros esfuerzos en atender a la amplia variedad de usuarios de JavaScript. Contáctenos en team@babeljs.io si desean discutir más opciones.

Soporte para ECMAScript 2021 (#11864)​

En la última reunión, TC39 promovió a Etapa 4 las propuestas de asignación lógica y separadores numéricos. Babel ya soportaba estas propuestas mediante los plugins @babel/plugin-proposal-logical-assignment-operators y @babel/plugin-proposal-numeric-separators. Ahora están incluidos en @babel/preset-env y se compilan según tus objetivos, como cualquier otra característica de ECMAScript.

Asignación Lógica​

La asignación lógica ofrece una notación abreviada que combina operadores lógicos y expresiones de asignación:

JavaScript
this.disabled ??= false;
this.disabled ?? (this.disabled = false);

clicked &&= !isDoubleClicked();
clicked = clicked && !isDoubleClicked();

hasDups ||= (prev === cur);
if (!hasDup) hasDups = (prev === cur);

Separador Numérico​

El separador numérico (_) es un carácter que puedes insertar entre dígitos en literales numéricos para mejorar la separación visual:

JavaScript
1_000_000_000
0.000_000_000_1

Reexportación de Namespace (#11849)​

Un módulo importado puede reexportarse como un nuevo namespace:

JavaScript
export * as ns from "mod";
nota

Esto ya estaba incluido en ECMAScript 2020, pero aún no era soportado por @babel/preset-env.

Desde la versión 7.11, @babel/preset-env omite @babel/plugin-proposal-export-namespace-from si el caller lo soporta: esto permite dejar export * as ns sin modificar para que sea procesado directamente por los bundlers. Nota: babel-loader y @rollup/plugin-babel aún no indican a Babel que soportan esta sintaxis, pero estamos trabajando con los mantenedores correspondientes.

Si se configura { modules: false }, Babel asumirá que el código transpilado se ejecutará en motores con soporte nativo para ESM. export * as ns se compilará según los targets, como cualquier otra característica de ECMAScript.

Si planeas empaquetar el código transpilado, elimina la opción { modules: false }. Por defecto, preset-env determinará las transformaciones de módulos mediante datos del caller proporcionados por babel-loader y @rollup/plugin-babel.

{
  "presets": [
    ["@babel/env", {
      "targets": ["defaults"],
-     "modules": false,
    }]
}

Si proporcionas un valor diferente para la opción modules, export * as ns siempre será transformado.

Si estabas usando directamente cualquiera de

  • @babel/plugin-proposal-export-namespace-from

  • @babel/plugin-proposal-logical-assignment-operators

  • @babel/plugin-proposal-numeric-separators

puedes eliminarlos de tu configuración ya que ahora están incluidos por defecto:

{
  "presets": [
    ["@babel/env", { "targets": ["defaults"] }]
  ],
  "plugins": [
-   "@babel/plugin-proposal-export-namespace-from",
-   "@babel/plugin-proposal-logical-assignment-operators",
-   "@babel/plugin-proposal-numeric-separators"
  ]
}

Soporte para TypeScript 4.0 (#11760)​

TypeScript 4.0 introduce varias nuevas características.

Tipos de Tupla Variádicos​

Ahora puedes especificar spreads genéricos en tipos de tupla, y estos spreads pueden ubicarse en cualquier posición:

type Arr = readonly any[];

function collect<L extends Arr, M extends Arr>(b: boolean, l: L, m: M): [boolean, ...L, ...M] {
  return [b, ...l, ...m];
}

Elementos de Tupla Etiquetados​

Los elementos de tupla ahora pueden tener etiquetas:

type Log = [failed: boolean, reason?: Error, ...stacks?: string[]]
// same as
type Log = [boolean, Error?, string[]?];

Uso de unknown en Enlaces de Cláusulas catch​

Puedes especificar el tipo unknown para variables de cláusulas catch:

try {
  // ...
} catch (e: unknown) {
  // type error! Error() only accepts string | undefined
  throw new Error(e);

  if (typeof e === "string") {
    // e is a string
    throw new Error(e);
  }
}

Nota que actualmente solo unknown y any están permitidos en anotaciones de tipo para enlaces catch. @babel/parser no aplica esta verificación porque ni los alias de tipo (type ANY = any) ni las intersecciones (any | unknown) se evalúan en tiempo de compilación.

A partir de Babel 7.11, puedes usar estas nuevas características sin cambios de configuración. Para más detalles, consulta el Anuncio de TypeScript 4.0.

Soporte de parser para Literales Decimales (#11640)​

La Propuesta de Literales Decimales (Etapa 1) proporciona una notación para números decimales, análoga a BigInt y enteros.

JavaScript
0.1m + 0.2m === 0.3m; // true

Babel ahora soporta el análisis de estos literales: puedes añadir el plugin @babel/plugin-syntax-decimal a tu configuración de Babel o, si usas @babel/parser directamente, habilitar el plugin decimal. Babel no proporciona implementaciones de polyfill para decimales.

Impresión de configuración (#11588)​

Babel puede configurarse de múltiples formas (programáticamente y mediante configuraciones JSON/JavaScript). Esta flexibilidad, sin embargo, tiene un costo: puede ser difícil entender qué archivos de configuración aplican en tu proyecto y cómo Babel combina estas configuraciones. También podrías usar Babel indirectamente donde la configuración es generada por un paquete dentro de tus node_modules. Todos estos casos muestran la necesidad de una forma para mostrar información de configuración que ayude a depurar problemas de compilación.

Babel 7.11 ofrece una variable de entorno para este propósito:

Shell
# *nix or WSL
BABEL_SHOW_CONFIG_FOR=./src/myComponent.jsx npm start
$env:BABEL_SHOW_CONFIG_FOR = ".\src\myComponent.jsx"; npm start

imprimirá la configuración efectiva aplicada a src/myComponent.jsx.

Consulta la documentación de configuración para detalles de uso y ejemplos de salida.

@babel/eslint-parser (#10709)​

babel-eslint se ha movido al monorepositorio de Babel bajo un nuevo nombre: @babel/eslint-parser. Ofrece mejor integración entre Babel y ESLint, con soporte completo para ES2020. En la publicación Estado de babel-eslint, Kai profundiza sobre el estado actual de @babel/eslint-parser.