Aller au contenu principal

Version 7.23.0 : Métadonnées de décorateurs et nombreuses nouvelles fonctionnalités `import` !

· 7 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 →

Nous venons de publier Babel 7.23.0 ! 🎉

Cette version inclut le support de transformation pour les propositions Decorator Metadata, Source Phase Import, Deferred Import Evaluation et Optional Chaining Assignment. Nous avons également mis à jour notre parser pour supporter TypeScript 5.2 et ajouté une option permettant d'utiliser l'extension .ts dans les imports TypeScript.

En plus de la version 7.23.0, nous avons récemment publié la première version alpha de Babel 8 !

Consultez le changelog complet 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​

Métadonnées de décorateurs (#15895)​

La proposition Decorator Metadata (stage 3) étend les décorateurs, permettant aux décorateurs de communiquer entre eux via le partage de métadonnées.

function write(_, context) {
  context.metadata.message = "Hello from writer!";
}
function read(_, context) {
  console.log(context.metadata.message);
}

@read // Logs "Hello from writer!"
class A {
  @write x;
}

Bien que nous ayons habituellement un plugin par proposition, ces deux fonctionnalités sont si liées que nous avons intégré le support des métadonnées directement dans @babel/plugin-proposal-decorators. Si vous utilisez la dernière version de Babel avec les décorateurs standard, cette fonctionnalité est activée par défaut.

Imports de phase source pour modules WebAssembly (#15829, #15870)​

La proposition Source Phase Import (stage 3) permet d'importer une représentation objet du code source d'un module sans l'évaluer ni charger ses dépendances. Utilisez la syntaxe import source pour les langages ayant une représentation source définie :

import source fooSource from "foo";

Le cas d'usage principal est d'avoir une syntaxe statique pour charger des objets WebAssembly.Module, plutôt qu'une approche dynamique :

// Before
const url = import.meta.resolve("./my-wasm/module.wasm");
const responsePromise = fetch(url);
const mod = await WebAssembly.compileStreaming(responsePromise);

// After
import source mod from "./my-wasm/module.wasm";

Babel supporte désormais la transformation des imports source pour WebAssembly ciblant Node.js, des environnements Web (navigateurs et Deno) ou les deux, selon vos targets configurés.

Utilisez le plugin @babel/plugin-proposal-import-wasm-source pour cette transformation :

{
  "targets": ["chrome 90", "firefox 90", "node 20.6"],
  "plugins": ["@babel/plugin-proposal-import-wasm-source"]
}

Évaluation différée des imports (#15845, #15878)​

La proposition Deferred Import Evaluation (stage 2) permet de différer l'évaluation (synchrone) des modules importés jusqu'à leur utilisation. Cela améliore significativement les performances au démarrage pour les modules coûteux à initialiser.

Utilisez la nouvelle syntaxe import defer pour différer vos imports :

// this line does not evaluate ./mod
import defer * as myMod from "./mod";


later(() => {
  // this one evaluates it!
  use(myMod.foo);
})

La syntaxe import defer ne supporte que les imports de namespaces, donc ceci n'est pas valide :

import defer modDefault from "./mod";
import defer { named } from "./mod";

Babel ne supporte la compilation de import defer que lors de la transformation de modules ECMAScript en CommonJS, via le plugin @babel/plugin-proposal-import-defer :

// babel.config.json
{
  "plugins": [
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-proposal-import-defer"
  ]
}

Si vous utilisez Babel avec un bundler (sans compilation de modules), et que votre bundler supporte import defer, utilisez @babel/plugin-syntax-import-defer pour autoriser l'analyse de la nouvelle syntaxe.

Affectation par chaînage optionnel (#15751)​

La proposition Affectation par chaînage optionnel à l'étape 1 permet d'utiliser le chaînage optionnel à gauche des opérateurs d'affectation :

maybeAnObj?.prop = theValue;

// Equivalent to

if (maybeAnObj != null) maybeAnObj.prop = theValue;

Cette proposition est portée par Nicolò Ribaudo, membre de l'équipe Babel, et nous l'implémentons déjà à l'étape 1 pour recueillir des retours qui pourront aider le processus de conception au sein du TC39. Si vous avez des commentaires, des exemples concrets ou des cas d'usage à partager, merci de les laisser dans le dépôt de la proposition !

Vous pouvez tester cette proposition avec le plugin @babel/plugin-proposal-optional-chaining-assign. Compte tenu du stade précoce et donc du risque élevé de changements cassants, vous devez spécifier la version à utiliser (actuellement seule 2023-07 est prise en charge) :

// babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-optional-chaining-assign", {
      "version": "2023-07"
    }]
  ]
}

Mises à jour TypeScript (#15896, #15913)​

Babel 7.23.0 prend désormais en charge l'analyse syntaxique de TypeScript 5.2, dont la seule nouveauté syntaxique est l'introduction de types tuple combinant des entrées étiquetées et non étiquetées.

De plus, @babel/preset-typescript dispose désormais d'une option rewriteImportExtensions qui, une fois activée, réécrira les extensions .ts/.mts/.cts dans vos déclarations d'import en .js/.mjs/.cjs. Combinée à l'option TypeScript allowImportingTsExtension, cela vous permet d'écrire des spécificateurs relatifs complets dans vos imports tout en utilisant la même extension que celle des fichiers que vous écrivez.

Par exemple, avec cette structure de projet (où src contient les fichiers sources et dist les fichiers compilés) :

.
├── src
│   ├── main.ts
│   └── dep.ts
├── dist
│   ├── main.js
│   └── dep.js
├── babel.config.json
└── tsconfig.json

et avec les fichiers de configuration suivants :

babel.config.jsontsconfig.json
{
  "presets": [
    ["@babel/preset-typescript", {
      "rewriteImportExtensions": true
    }]
  ]
}
{
  "compilerOptions": {
    "lib": ["esnext"],
    "noEmit": true,
    "isolatedModules": true,
    "moduleResolution": "nodenext",
    "allowImportingTsExtensions": true
  }
}

vous pourrez écrire import x from "./dep.ts" dans main.ts, et Babel le transformera en import x from "./dep.js" lors de la compilation de main.ts en main.js.

Babel 8 alpha​

Après plusieurs années de travail, nous avons enfin publié la version alpha de Babel 8.0.0 ! 🥳

Les futures pré-versions incluront d'autres changements cassants, nous ne recommandons donc pas de l'utiliser en production sauf si vous êtes prêt à suivre toutes les modifications. Cependant, vous pouvez dès à présent commencer à vous préparer pour la version stable de Babel 8.0.0 :

  • Vous pouvez l'installer avec npm install -D @babel/core@next (ou la commande équivalente dans votre gestionnaire de paquets), et vérifier son fonctionnement dans votre projet. Veillez à ce que tous les paquets @babel/* dans votre package.json aient exactement la même version (par exemple 8.0.0-alpha.2).

  • Vous pouvez consulter le guide de migration pour les utilisateurs : de nombreux changements cassants introduits dans Babel 8 peuvent déjà être activés dans Babel 7, et Babel 8 supprimera simplement les options correspondantes pour en faire le comportement par défaut.

  • Si vous êtes auteur de plugin Babel ou utilisez directement l'API programmatique de Babel, consultez le guide de migration pour les auteurs d'intégrations pour vous assurer que votre bibliothèque est compatible avec Babel 8.

En complément des guides de migration, vous pouvez consulter le journal complet des modifications des différentes pré-versions de Babel 8 sur GitHub.