Saltar al contenido principal

7.22.0 Publicado: Soporte para Explicit Resource Management y análisis de Import Attributes

· 7 min de lectura
Babel Team
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 7.22.0 ya está disponible, con soporte de análisis/transformación para la propuesta Explicit Resource Management, incluyendo ambas variantes síncrona y asíncrona, y con soporte de análisis para Import Attributes (una evolución de la antigua propuesta Import Assertions).

También actualizamos nuestra implementación de decoradores siguiendo algunos cambios en la propuesta, y añadimos soporte para las sentencias TypeScript import ... = y export ... =.

@babel/preset-env ahora incluye por defecto soporte de transformación para el flag v de expresiones regulares, recientemente aprobado como parte del estándar ECMAScript. Por último, renombramos todos los plugins para características estables de ECMAScript de -proposal- a -transform-.

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​

Gestión Explícita de Recursos (#15633, #15520)​

La propuesta Explicit Resource Management en Etapa 3 permite definir variables que contienen recursos que serán "liberados" al salir del ámbito donde se declaran. Esto se realiza mediante declaraciones using (para liberación síncrona) y await using (para liberación asíncrona):

JavaScript
{
  using fileHandle = filesystem.open("./my/file.txt");

  write(fileHandle, "Hello!");
} // At the end of the block, fileHandle will be automatically closed.
JavaScript
{
  await using db = await Database.connect("//my-db.sql");
  db.query("INSERT INTO tools (name, version) VALUES ('Babel', '7.22.0')");
} // At the end of the block, the db connection will be closed asynchronously

Puedes habilitar el soporte para esta propuesta añadiendo @babel/plugin-proposal-explicit-resource-management a tu configuración de Babel:

babel.config.json
 {
   "plugins": [
     "@babel/plugin-proposal-explicit-resource-management"
   ]
 }

También puedes probar esta propuesta en nuestro REPL.

Atributos de Importación (#15536, #15620)​

La sintaxis de la propuesta "import assertions" cambió para usar la palabra clave with en lugar de assert, y también ha sido renombrada a "import attributes":

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

import("./foo.json", { with: { type: "json" } });

Hemos implementado soporte de análisis para esta nueva versión de la propuesta, que puede activarse usando el plugin @babel/plugin-syntax-import-attributes (o, si usas @babel/parser directamente, con importAttributes):

babel.config.json
 {
   "plugins": [
-    "@babel/syntax-import-assertions",
+    "@babel/syntax-import-attributes"
   ]
 }

Puedes leer más sobre los cambios en la propuesta en las diapositivas presentadas en la reunión de marzo del TC39, y sobre su motivación en las diapositivas de la reunión de enero del TC39.

precaución

@babel/plugin-syntax-import-assertions seguirá funcionando hasta que lancemos Babel 8.0.0, pero ya no recibirá mantenimiento, por lo que recomendamos encarecidamente migrar al nuevo plugin.

Para facilitar la migración de with a assert, si ejecutas el código compilado por Babel solo en herramientas y entornos que admiten la sintaxis antigua pero aún no la nueva (como Node.js 20 o Rollup 3.21), puedes usar @babel/plugin-proposal-import-attributes-to-assertions:

babel.config.json
 {
   "plugins": [
-    "@babel/syntax-import-assertions",
+    "@babel/plugin-proposal-import-attributes-to-assertions"
   ]
 }

🛑 Nota: este plugin genera código obsoleto que no funcionará en herramientas y entornos que solo admiten la sintaxis with descrita actualmente por la propuesta.

Actualizaciones de decoradores (#15570)​

El comité TC39 recibió comentarios adicionales de herramientas y motores JavaScript que implementan decoradores, refinó la propuesta y diseñó diferentes cambios y correcciones en respuesta.

Los cambios relevantes para usuarios de Babel son:

  • Los campos estáticos accessor ahora funcionan con clases derivadas:

    JavaScript
    class Base {
      static accessor x = 2;
    }
    class Derived extends Base {}

    Derived.x; // Used to throw, now returns `2`

  • Los decoradores almacenados en propiedades de objeto ahora se llaman usando el objeto como this en lugar de undefined:

    JavaScript
    let MyDecs = {
      dec() {
        console.log(this); // Now logs `MyDecs` instead of `undefined`
      }
    };

    @MyDecs.dec class {}

Puedes usar esta nueva versión de decoradores pasando la opción version: "2023-05" al plugin de decoradores:

babel.config.json
 {
   "plugins": [
     ["@babel/plugin-proposal-decorators", {
       "version": "2023-05"
     }]
   ]
 }

También puedes probar la nueva versión de la propuesta en nuestro REPL, activando el preset "Stage 3" y seleccionando la versión adecuada de decoradores.

Sentencias TypeScript import ... = y export =​

Al usar la opción TypeScript verbatimModuleSyntax, las declaraciones ESM import/export no están permitidas en archivos CommonJS. En su lugar, los desarrolladores deben usar las declaraciones import ... = y export =:

TypeScript
import A = require("./a");

export = { x: 2 };

que se transforman en:

JavaScript
const A = require("./a");

module.exports = { x: 2 };

Esta sintaxis solo es compatible en módulos ECMAScript, y únicamente al compilarlos a CommonJS. A menos que tengas una configuración personalizada, esto significa:

  • en archivos .cts, al usar @babel/preset-typescript

  • en archivos .ts escritos como ESM y compilados con @babel/plugin-transform-modules-commonjs

Paquetes renombrados​

A partir de ahora, renombraremos los plugins -proposal- a -transform- una vez que alcancen la Etapa 4 en el proceso de estandarización y por tanto se vuelvan estables. Los siguientes paquetes han sido renombrados:

Old nameNew nameECMAScript version
@babel/plugin-proposal-unicode-sets-regex@babel/plugin-transform-unicode-sets-regexES2024
@babel/plugin-proposal-class-static-block@babel/plugin-transform-class-static-blockES2022
@babel/plugin-proposal-private-property-in-object@babel/plugin-transform-private-property-in-objectES2022
@babel/plugin-proposal-class-properties@babel/plugin-transform-class-propertiesES2022
@babel/plugin-proposal-private-methods@babel/plugin-transform-private-methods
@babel/plugin-proposal-numeric-separator@babel/plugin-transform-numeric-separatorES2021
@babel/plugin-proposal-logical-assignment-operators@babel/plugin-transform-logical-assignment-operatorsES2021
@babel/plugin-proposal-nullish-coalescing-operator@babel/plugin-transform-nullish-coalescing-operatorES2020
@babel/plugin-proposal-optional-chaining@babel/plugin-transform-optional-chainingES2020
@babel/plugin-proposal-export-namespace-from@babel/plugin-transform-export-namespace-fromES2020
@babel/plugin-proposal-json-strings@babel/plugin-transform-json-stringsES2019
@babel/plugin-proposal-optional-catch-binding@babel/plugin-transform-optional-catch-bindingES2019
@babel/plugin-proposal-async-generator-functions@babel/plugin-transform-async-generator-functionsES2018
@babel/plugin-proposal-object-rest-spread@babel/plugin-transform-object-rest-spreadES2018
@babel/plugin-proposal-unicode-property-regex@babel/plugin-transform-unicode-property-regexES2018

Estos plugins están incluidos por defecto en @babel/preset-env: si usas el preset, no necesitas listarlos explícitamente en tu configuración y por tanto este cambio no te afectará. Los paquetes con el nombre antiguo ya no se actualizarán.