Version 7.22.0 : Prise en charge de la gestion explicite des ressources et analyse des attributs d'import

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Babel 7.22.0 est disponible, avec la prise en charge de l'analyse et de la transformation pour la proposition Explicit Resource Management, incluant les variantes synchrones et asynchrones, ainsi que la prise en charge de l'analyse pour les Import Attributes (une évolution de l'ancienne proposition Import Assertions).

Nous avons également mis à jour notre implémentation des décorateurs suite à des changements dans la proposition, et ajouté la prise en charge des instructions TypeScript import ... = et export ... =.

@babel/preset-env inclut désormais par défaut la prise en charge de la transformation du flag v pour les expressions régulières, récemment approuvé dans le standard ECMAScript. Enfin, nous avons renommé tous les plugins pour les fonctionnalités stables d'ECMAScript, passant de -proposal- à -transform-.

Vous pouvez consulter l'intégralité du journal des modifications sur GitHub.

Si vous ou votre entreprise souhaitez soutenir Babel et l'évolution de JavaScript sans savoir comment contribuer, vous pouvez nous faire un don via notre Open Collective ou, mieux encore, collaborer directement avec nous à l'implémentation de nouvelles propositions ECMAScript ! En tant que projet géré par des bénévoles, nous dépendons du soutien communautaire pour financer nos efforts visant à accompagner la diversité des utilisateurs JavaScript. Contactez-nous à team@babeljs.io pour en discuter !

Principales fonctionnalités

Gestion explicite des ressources (#15633, #15520)

La proposition Explicit Resource Management (Stage 3) permet de définir des variables contenant des ressources qui seront "libérées" à la sortie de la portée dans laquelle elles sont déclarées. Cela se fait via les déclarations using (pour une libération synchrone) et await using (pour une libération asynchrone) :

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

Vous pouvez activer la prise en charge de cette proposition en ajoutant @babel/plugin-proposal-explicit-resource-management à votre configuration Babel :

babel.config.json

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

Vous pouvez également tester cette proposition dans notre REPL.

Attributs d'import (#15536, #15620)

La syntaxe de la proposition "import assertions" a changé pour utiliser le mot-clé with à la place de assert, et a également été renommée en "import attributes" :

JavaScript

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

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

Nous avons implémenté la prise en charge de l'analyse syntaxique pour cette nouvelle version de la proposition, qui peut être activée avec le plugin @babel/plugin-syntax-import-attributes (ou, si vous utilisez directement @babel/parser, l'option importAttributes) :

babel.config.json

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

Vous pouvez en savoir plus sur les changements de la proposition dans les diapositives présentées lors de la réunion TC39 de mars, et sur la motivation dans les diapositives de la réunion TC39 de janvier.

attention

@babel/plugin-syntax-import-assertions continuera de fonctionner jusqu'à la sortie de Babel 8.0.0, mais ne sera plus maintenu. Nous recommandons vivement de migrer vers le nouveau plugin.

Pour faciliter la migration de with vers assert, si vous exécutez le code compilé par Babel uniquement dans des outils et environnements d'exécution qui prennent en charge l'ancienne syntaxe mais pas encore la nouvelle (comme Node.js 20 ou Rollup 3.21), vous pouvez utiliser @babel/plugin-proposal-import-attributes-to-assertions :

babel.config.json

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

🛑 Notez que ce plugin génère du code obsolète qui ne fonctionnera pas dans les outils et environnements d'exécution ne prenant en charge que la syntaxe with décrite par la proposition actuelle.

Mises à jour des décorateurs (#15570)

Le comité TC39 a reçu des retours supplémentaires des outils et moteurs JavaScript implémentant les décorateurs, affinant la proposition et concevant différents changements et corrections en réponse.

Les changements pertinents pour les utilisateurs de Babel sont :

• Les champs statiques accessor fonctionnent désormais avec les classes dérivées :

  JavaScript

  class Base {
    static accessor x = 2;
  }
  class Derived extends Base {}
  
  Derived.x; // Used to throw, now returns `2`

• Les décorateurs stockés dans des propriétés d'objet sont maintenant appelés avec l'objet comme this au lieu de undefined :

  JavaScript

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

Vous pouvez utiliser cette nouvelle version des décorateurs en passant l'option version: "2023-05" au plugin des décorateurs :

babel.config.json

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

Vous pouvez également tester la nouvelle version de la proposition dans notre REPL, en activant le préréglage "Stage 3" et en choisissant la version appropriée des décorateurs.

Instructions TypeScript import ... = et export =

Lorsqu'on utilise l'option TypeScript verbatimModuleSyntax, les déclarations ESM import/export sont interdites dans les fichiers CommonJS. Les développeurs doivent plutôt utiliser les déclarations import ... = et export = :

TypeScript

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

export = { x: 2 };

qui se compilent en :

JavaScript

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

module.exports = { x: 2 };

Cette syntaxe n'est prise en charge que dans les modules ECMAScript, et uniquement lors de leur compilation vers CommonJS. Sauf configuration personnalisée, cela signifie :

• dans les fichiers .cts, lors de l'utilisation de @babel/preset-typescript

• dans les fichiers .ts écrits en tant que modules ESM et compilés avec @babel/plugin-transform-modules-commonjs

Renommage des paquets

Désormais, nous renommons les plugins -proposal- en -transform- lorsqu'ils atteignent le Stage 4 du processus de standardisation et deviennent stables. Les paquets suivants ont été renommés :

Old name	New name	ECMAScript version
@babel/plugin-proposal-unicode-sets-regex	@babel/plugin-transform-unicode-sets-regex	ES2024
@babel/plugin-proposal-class-static-block	@babel/plugin-transform-class-static-block	ES2022
@babel/plugin-proposal-private-property-in-object	@babel/plugin-transform-private-property-in-object	ES2022
@babel/plugin-proposal-class-properties	@babel/plugin-transform-class-properties	ES2022
@babel/plugin-proposal-private-methods	@babel/plugin-transform-private-methods
@babel/plugin-proposal-numeric-separator	@babel/plugin-transform-numeric-separator	ES2021
@babel/plugin-proposal-logical-assignment-operators	@babel/plugin-transform-logical-assignment-operators	ES2021
@babel/plugin-proposal-nullish-coalescing-operator	@babel/plugin-transform-nullish-coalescing-operator	ES2020
@babel/plugin-proposal-optional-chaining	@babel/plugin-transform-optional-chaining	ES2020
@babel/plugin-proposal-export-namespace-from	@babel/plugin-transform-export-namespace-from	ES2020
@babel/plugin-proposal-json-strings	@babel/plugin-transform-json-strings	ES2019
@babel/plugin-proposal-optional-catch-binding	@babel/plugin-transform-optional-catch-binding	ES2019
@babel/plugin-proposal-async-generator-functions	@babel/plugin-transform-async-generator-functions	ES2018
@babel/plugin-proposal-object-rest-spread	@babel/plugin-transform-object-rest-spread	ES2018
@babel/plugin-proposal-unicode-property-regex	@babel/plugin-transform-unicode-property-regex	ES2018

Ces plugins sont tous inclus par défaut dans @babel/preset-env : si vous utilisez ce préréglage, vous n'avez pas besoin de les lister explicitement dans votre configuration et ce changement ne vous affectera donc pas. Les paquets portant l'ancien nom ne seront plus mis à jour.