Lanzamiento 7.26.0: características stage 4 habilitadas por defecto y nueva impresora de código experimental

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.26.0!

Habilita por defecto dos propuestas de ECMAScript que se estandarizaron en la última reunión de TC39: atributos de importación y modificadores en línea de expresiones regulares, además del análisis de enumeraciones de Flow.

Babel ahora también permite que los plugins proporcionen hooks asíncronos pre/post, e incluye un [modo experimental](TODO: Link) para preservar las posiciones de los tokens al generar el código transformado.

Puedes leer el changelog 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

Modificadores en línea para RegExp (#16692)

Los modificadores en línea de expresiones regulares permiten habilitar o deshabilitar las banderas i/m/s solo en parte de una expresión regular. Por ejemplo, /hello (?i:world)/ coincide con cualquier cadena que contenga "hello " literal, seguido de "world" con cualquier capitalización: hello world y hello WoRlD coinciden, mientras que Hello world no.

Esta propuesta alcanzó la Etapa 4 en la reunión de TC39 de octubre 2024 y se incluirá en la próxima versión del estándar JavaScript. @babel/preset-env transpilará automáticamente esta característica según tus objetivos de compilación, y puedes eliminar @babel/plugin-proposal-regexp-modifiers de tu configuración.

Si por algún motivo aún necesitas incluir explícitamente el plugin, se ha renombrado a @babel/plugin-transform-regexp-modifiers al convertirse en una característica estándar del lenguaje.

Atributos de importación (#16579)

La propuesta de atributos de importación también alcanzó la Etapa 4 en la reunión de TC39 de octubre 2024. Permite proporcionar parámetros a la plataforma subyacente para indicar cómo cargar módulos:

import "./my-module" with { some_param: "hello" };

Actualmente, el único atributo ampliamente soportado es type, que puede usarse para importar módulos JSON o (en web) CSS:

import data from "./data" with { type: "json" };

Babel ahora analizará los atributos de importación por defecto, por lo que puedes eliminar @babel/plugin-syntax-import-attributes y @babel/plugin-syntax-import-assertions de tu configuración.

advertencia

La sintaxis antigua que usaba assert en lugar de with se eliminó de la propuesta. Por defecto Babel no la analizará.

Al convertirse en una característica estándar de JavaScript, @babel/plugin-proposal-json-modules se ha renombrado a @babel/plugin-transform-json-modules. Este plugin no está incluido en @babel/preset-env, ya que solo es necesario si no usas un bundler o si tu bundler no soporta importar módulos JSON.

Reescribir extensiones .ts en import() dinámico (#16794)

Babel ha soportado reescribir extensiones .ts a .js en declaraciones de importación desde el año pasado, usando la opción rewriteImportExtensions de @babel/preset-typescript:

// Input
import { hello } from "./dep.ts";
let myVar: number = hello();

// Output
import { hello } from "./dep.js";
let myVar = hello();

Nos alegra ver que TypeScript está introduciendo una opción similar. Sin embargo, hay una diferencia: Babel solo transformaba rutas en declaraciones de import estáticas (ya que son las únicas que siempre pueden analizarse estáticamente), mientras que TypeScript también admitirá reescribirlas en expresiones de import dinámicas.

Babel 7.26 se alinea con el comportamiento futuro de TypeScript, al también reescribir extensiones en import() dinámico:

// Input
await import("./dep.ts");
await import(url);

// Output
await import("./dep.js");
await import(url.replace(/\.ts$/, ".js")); // simplified