7.23.0 Lanzada: ¡Metadatos de Decoradores y muchas funciones nuevas de `import`!

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 lanzar Babel 7.23.0! 🎉

Incluye soporte de transformación para las propuestas Decorator Metadata, Source Phase Import, Deferred Import Evaluation y Optional Chaining Assignment. También actualizamos nuestro parser para soportar la nueva versión de TypeScript 5.2 y añadimos una opción de transformación para usar la extensión .ts en imports de TypeScript.

¡Además de lanzar la versión 7.23.0, también publicamos recientemente la primera versión alpha de Babel 8!

Puedes leer el registro de cambios completo en GitHub.

Si tú o tu empresa quieren apoyar a Babel y la evolución de JavaScript, pero no están seguros de cómo, pueden donarnos en nuestro Open Collective y, aún mejor, trabajar 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 dar soporte a la amplia variedad de usuarios de JavaScript. ¡Contáctanos en team@babeljs.io si quieres conversar más!

Destacados

Metadatos de Decoradores (#15895)

La propuesta decorator metadata en Etapa 3 extiende la propuesta de Decoradores, permitiendo que los decoradores se comuniquen entre sí compartiendo metadatos.

function write(_, context) {
  context.metadata.message = "Hello from writer!";
}
function read(_, context) {
  console.log(context.metadata.message);
}

@read // Logs "Hello from writer!"
class A {
  @write x;
}

Aunque normalmente tenemos un plugin por propuesta, estas dos están tan relacionadas que decidimos incluir soporte para Decorator Metadata directamente en @babel/plugin-proposal-decorators. Si usas la última versión de Babel y ya empleas decoradores estándar, esta propuesta está habilitada por defecto.

Importaciones en Fase de Fuente para módulos WebAssembly (#15829, #15870)

La propuesta Source Phase Import en Etapa 3 permite importar una representación objetual del fuente de un módulo, sin evaluarlo y sin cargar sus dependencias. Puedes cargar fuentes de módulos usando la sintaxis import source, para lenguajes que tienen una representación de fuente definida:

import source fooSource from "foo";

El caso de uso motivador es tener sintaxis estática para cargar objetos WebAssembly.Module, en lugar de verse obligado a hacerlo dinámicamente:

// Before
const url = import.meta.resolve("./my-wasm/module.wasm");
const responsePromise = fetch(url);
const mod = await WebAssembly.compileStreaming(responsePromise);

// After
import source mod from "./my-wasm/module.wasm";

Babel ahora admite transformar importaciones de fuente para módulos WebAssembly dirigidos a Node.js, entornos compatibles con Web (navegadores y Deno), o ambos, dependiendo de tus targets configurados.

Puedes transformarlo usando el plugin @babel/plugin-proposal-import-wasm-source:

{
  "targets": ["chrome 90", "firefox 90", "node 20.6"],
  "plugins": ["@babel/plugin-proposal-import-wasm-source"]
}

Evaluación de Importaciones Diferidas (#15845, #15878)

La propuesta Deferred Import Evaluation en Etapa 2 permite diferir la evaluación (síncrona) de módulos importados hasta que se usen. Esto puede mejorar significativamente el rendimiento de arranque de tu código al usar módulos con alto costo de inicialización.

Puedes usar la nueva sintaxis import defer para diferir tus importaciones:

// this line does not evaluate ./mod
import defer * as myMod from "./mod";


later(() => {
  // this one evaluates it!
  use(myMod.foo);
})

La sintaxis import defer solo admite importaciones de espacio de nombres, por lo que lo siguiente no es válido:

import defer modDefault from "./mod";
import defer { named } from "./mod";

Babel solo admite compilar import defer al compilar módulos ECMAScript a CommonJS, usando el plugin @babel/plugin-proposal-import-defer:

// babel.config.json
{
  "plugins": [
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-proposal-import-defer"
  ]
}

Si usas Babel con un bundler y por tanto no compilas módulos vía Babel, y tu bundler soporta import defer, puedes usar @babel/plugin-syntax-import-defer para permitir analizar la nueva sintaxis.

Asignación con encadenamiento opcional (#15751)

La propuesta Asignación con encadenamiento opcional en Fase 1 permite usar el encadenamiento opcional en el lado izquierdo de los operadores de asignación:

maybeAnObj?.prop = theValue;

// Equivalent to

if (maybeAnObj != null) maybeAnObj.prop = theValue;

Esta propuesta está impulsada por Nicolò Ribaudo, miembro del equipo de Babel, y ya la estamos implementando en Fase 1 para recopilar comentarios que puedan ayudar en el proceso de diseño en TC39. Si tienes algún comentario, ejemplo del mundo real o caso de uso que quieras compartir, ¡déjalos en el repositorio de la propuesta!

Puedes probar esta propuesta usando el plugin @babel/plugin-proposal-optional-chaining-assign. Dada la fase temprana y, por lo tanto, la alta posibilidad de cambios incompatibles, debes especificar qué versión quieres usar (actualmente solo se admite 2023-07):

// babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-optional-chaining-assign", {
      "version": "2023-07"
    }]
  ]
}

Actualizaciones de TypeScript (#15896, #15913)

Babel 7.23.0 ahora admite analizar TypeScript 5.2, cuya única adición sintáctica es la introducción de tipos de tupla que tienen elementos etiquetados y no etiquetados.

Además, @babel/preset-typescript ahora tiene una opción rewriteImportExtensions que, cuando se habilita, reescribirá las extensiones .ts/.mts/.cts en tus declaraciones de importación a .js/.mjs/.cjs. Junto con la opción allowImportingTsExtension de TypeScript, esto te permite escribir especificadores relativos completos en tus importaciones usando la misma extensión que los archivos que estás creando.

Por ejemplo, dada esta estructura de proyecto (donde src contiene los archivos fuente y dist los archivos compilados):

.
├── src
│   ├── main.ts
│   └── dep.ts
├── dist
│   ├── main.js
│   └── dep.js
├── babel.config.json
└── tsconfig.json

y con los siguientes archivos de configuración:

babel.config.json	tsconfig.json
{ "presets": [ ["@babel/preset-typescript", { "rewriteImportExtensions": true }] ] }	{ "compilerOptions": { "lib": ["esnext"], "noEmit": true, "isolatedModules": true, "moduleResolution": "nodenext", "allowImportingTsExtensions": true } }

podrás escribir import x from "./dep.ts" en main.ts, y Babel lo transformará a import x from "./dep.js" al compilar main.ts a main.js.

Babel 8 alpha

¡Después de varios años trabajando en ello, finalmente lanzamos Babel 8.0.0 alpha! 🥳

Las futuras versiones preliminares incluirán más cambios incompatibles, por lo que no recomendamos usarlo en producción a menos que estés dispuesto a seguir todos los cambios a medida que lleguen. Sin embargo, ya puedes empezar a prepararte para lo que será Babel 8.0.0 estable:

• Puedes instalarlo con npm install -D @babel/core@next (o el comando equivalente con tu gestor de paquetes), y verificar si ya funciona en tu proyecto. Por favor, asegúrate de que todos los paquetes @babel/* en tu package.json tengan exactamente la misma versión (por ejemplo, 8.0.0-alpha.2).

• Puedes leer la guía de migración para usuarios: muchos de los cambios incompatibles introducidos en Babel 8 ya se pueden habilitar en Babel 7, y Babel 8 simplemente eliminará las opciones relativas haciendo que sean el comportamiento predeterminado.

• Si eres autor de un plugin de Babel, o si usas la API programática de Babel directamente, puedes leer la guía de migración para autores de integraciones y asegurarte de que tu biblioteca funcione bien con Babel 8.

Además de las guías de migración, puedes leer el registro de cambios completo de las diversas versiones preliminares de Babel 8 en GitHub.