Aller au contenu principal

7.25.0 : Correctifs pour Safari et groupes de capture nommés dupliqués

· 4 min de lecture
Babel Team
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.25.0 est disponible !

@babel/preset-env prend désormais en charge par défaut la proposition de groupes de capture nommés dupliqués pour les expressions régulières, ainsi qu'un correctif pour les champs de classe lors du ciblage de Safari. Cette version améliore également la prise en charge de la compilation des imports de modules JSON en CommonJS, et ajoute la prise en charge des fichiers de configuration au mode --eval de @babel/node.

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 procéder, vous pouvez nous faire un don via notre Open Collective et, 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​

Groupes de capture nommés dupliqués (#16445)​

La proposition de groupes de capture nommés dupliqués permet de réutiliser le même nom pour des groupes dans des branches alternatives d'une expression régulière. Par exemple, une RegExp correspondant à des dates au format dd/mm/yyyy ou yyyy-mm-dd pourrait s'écrire ainsi :

let re =
  /(?<day>\d\d)\/(?<month>\d\d)\/(?<year>\d\d\d\d)|(?<year>\d\d\d\d)-(?<month>\d\d)-(?<day>\d\d)/;

"21/12/2023".match(re).groups.day; // 21
"2023-12-21".match(re).groups.day; // 21

Cette proposition a atteint le stade 4 lors de la réunion TC39 d'avril 2024 et sera incluse dans la prochaine version du standard JavaScript. Elle est donc désormais activée par défaut dans @babel/preset-env (lorsque nécessaire selon vos cibles), et vous pouvez supprimer en toute sécurité @babel/plugin-proposal-duplicate-named-capturing-groups-regex de votre configuration.

Si vous devez toujours lister explicitement le plugin pour quelque raison que ce soit, il a été renommé @babel/plugin-transform-duplicate-named-capturing-groups-regex puisque la proposition est devenue une fonctionnalité standard du langage.

Simplifier les imports de modules JSON en CommonJS (#16579)​

Après avoir introduit la transformation des imports de modules JSON dans Babel 7.24.0, nous avons constaté que le résultat généré n'était pas optimal pour les bundlers CommonJS.

Soit le code suivant :

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

@babel/plugin-proposal-json-modules le compilerait ainsi lors du ciblage de CommonJS sur Node.js :

const myConfig = JSON.parse(
  require("fs").readFileSync(require.resolve("./config.json"))
);

La combinaison JSON.parse + readFileSync est nécessaire pour garantir que config.json est bien un fichier JSON, et non un fichier config.json.js tentant d'exécuter du code subrepticement lors du chargement.

@babel/plugin-proposal-json-modules propose désormais une option uncheckedRequire pour simplifier le résultat, au prix d'une validation réduite. Vous pouvez l'activer dans votre configuration :

babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-json-modules", { "uncheckedRequire": true }]
  ]
}

et Babel générera alors le code suivant :

const myConfig = require("./config.json");

@babel/plugin-bugfix-safari-class-field-initializer-scope (#16569)​

Les versions de Safari antérieures à la 16 présentent un bogue lors de l'utilisation de parenthèses autour d'expressions dans les champs de classe. Par exemple, le code suivant génère une erreur :

{
  let a = [3];
  new class {
    c = (a)[0];
  };
}

Ce problème est particulièrement gênant lors de l'utilisation de Webpack ou lors de la compilation en CommonJS, car ces outils ajoutent des parenthèses lors de la transformation des imports. Par exemple, ce code source :

import { hello } from "./dep";

class A {
  prop = hello();
}

deviendrait

var _dep = /* ... */;

class A {
  prop = (0, _dep.hello)();
}

David Taylor a implémenté un correctif (merci !) dans le nouveau paquet @babel/plugin-bugfix-safari-class-field-initializer-scope, qui est activé par défaut dans @babel/preset-env lorsque vos cibles incluent des versions de Safari antérieures à la 16.