Aller au contenu principal

Version 7.24.0 : Mise à jour des décorateurs et importation de modules JSON

· 5 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.24.0 est disponible !

Nous avons mis à jour notre implémentation des décorateurs pour correspondre à la dernière version de la proposition, et amélioré la transformation des champs et méthodes privés de classe. Nous avons également ajouté la prise en charge de l'importation de modules JSON dans les navigateurs et Node.js, une proposition de Stage 3 plus ancienne dépendant des attributs d'import.

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​

Mises à jour des décorateurs (#16242)​

Les propositions de décorateurs au Stage 3 ont reçu de nombreuses mises à jour mineures ces dernières années, et malheureusement toutes les implémentations dans les différents outils présentent des versions légèrement différentes.

Nous avons mis à jour notre implémentation pour correspondre à la dernière version de la proposition. Cette version a également été implémentée dans TypeScript et est actuellement intégrée nativement dans les navigateurs. La principale différence par rapport à la version 2023-05 précédemment implémentée réside dans l'ordre d'exécution des initialiseurs enregistrés via la méthode context.addInitializer.

Vous pouvez activer cette version de la proposition en définissant l'option "version": "2023-11" dans @babel/plugin-proposal-decorators :

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

Vous pouvez également tester la nouvelle proposition de décorateurs dans le REPL en ligne de Babel.

Importation de modules JSON (#15829, #15870)​

Babel 7.24.0 ajoute enfin la prise en charge de la proposition de modules JSON, qui est en Stage 3 depuis 2021. Cette proposition permet d'importer directement des fichiers JSON via des déclarations import accompagnées d'un attribut type: "json" :

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

Babel transformera ces imports selon la méthode appropriée pour charger des fichiers JSON dans vos plateformes cibles, en fonction de votre option targets :

  • Navigateurs modernes

    const myConfig = await fetch(import.meta.resolve("./config.json"))
                            .then(r => r.json());

  • Navigateurs anciens sans prise en charge d'import.meta

  • Node.js (ESM)

  • Node.js (CommonJS)

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

  • Différentes combinaisons des solutions ci-dessus

Vous pouvez l'activer avec le plugin @babel/plugin-proposal-json-modules :

babel.config.json
{
  "targets": ["chrome 90", "firefox 90", "node 20.6"],
  "plugins": ["@babel/plugin-proposal-json-modules"]
}

Un parser Flow basé sur Hermes (#16284)​

Babel a implémenté le support des annotations de type Flow il y a très longtemps, mais cette dernière année nous n'avons pas bien suivi les nouvelles fonctionnalités du langage Flow.

Entre-temps, l'équipe Hermes a développé un plugin Babel, babel-plugin-syntax-hermes-parser, qui permet d'utiliser directement Hermes - le nouveau moteur JavaScript de React Native - pour parser du code Flow. Il prend en charge toutes les dernières fonctionnalités Flow, comme les casts de type as et les types conditionnels.

Vous pouvez désormais activer plus facilement ce parser via l'option experimental_useHermesParser de @babel/preset-flow :

babel.config.json
{
  "presets": [
    ["@babel/preset-flow", {
      "experimental_useHermesParser": true
    }]
  ]
}

Nous envisageons de supprimer le support Flow de @babel/parser dans une future version, au profit de ce parser basé sur Hermes. Testez-le, signalez tout bug de parsing dans le bug tracker d'Hermes et partagez-nous votre retour !

avertissement

Le parser Hermes ne prend pas encore en charge les transformations basées sur les commentaires dans les fichiers