Aller au contenu principal

Version 7.11.0 publiée : Prise en charge d'ECMAScript 2021 dans preset-env, TypeScript 4.0, affichage de configuration et avenir de `babel-eslint`

· 7 min de lecture
Huáng Jùnliàng
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 une nouvelle version mineure de Babel !

Cette version 7.11 inclut :

  • Prise en charge dans preset-env des assignations logiques (??=), séparateurs numériques (1_2) et ré-exports de namespace (export * as ns from ...)

  • Prise en charge de TypeScript 4.0

  • Support dans le parser de la proposition Stage-1 Decimal (7.11m)

  • Un indicateur d'environnement pour afficher la configuration Babel résolue d'un fichier (BABEL_SHOW_CONFIG_FOR)

En complément, nous publions le successeur de babel-eslint : @babel/eslint-parser !

Vous pouvez consulter l'intégralité du changelog sur GitHub.

Si vous avez des questions ou sujets à discuter, nous avons activé les GitHub Discussions sur notre dépôt !

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 ou mieux encore, collaborer directement avec nous à l'implémentation de nouvelles propositions ECMAScript ! Projet reposant sur le bénévolat, nous comptons sur le soutien communautaire pour financer nos efforts au service de la diversité des utilisateurs JavaScript. Contactez-nous à team@babeljs.io pour en discuter !

Prise en charge d'ECMAScript 2021 (#11864)​

Lors de la dernière réunion, le TC39 a fait passer les propositions d'assignation logique et de séparateurs numériques au Stage 4 ! Babel supportait déjà ces propositions via les plugins @babel/plugin-proposal-logical-assignment-operators et @babel/plugin-proposal-numeric-separators. Ils sont désormais inclus dans @babel/preset-env et compilés selon vos cibles, comme toute autre fonctionnalité ECMAScript.

Assignation logique​

L'assignation logique offre une notation raccourcie combinant opérateurs logiques et expression d'assignation :

JavaScript
this.disabled ??= false;
this.disabled ?? (this.disabled = false);

clicked &&= !isDoubleClicked();
clicked = clicked && !isDoubleClicked();

hasDups ||= (prev === cur);
if (!hasDup) hasDups = (prev === cur);

Séparateur numérique​

Le séparateur numérique (_) est un caractère que vous pouvez insérer entre les chiffres dans les littéraux numériques pour faciliter la séparation visuelle :

JavaScript
1_000_000_000
0.000_000_000_1

Export de namespace (#11849)​

Un module importé peut être ré-exporté comme nouveau namespace :

JavaScript
export * as ns from "mod";
note

Cette fonctionnalité était déjà incluse dans ECMAScript 2020, mais n'était pas encore prise en charge par @babel/preset-env.

Depuis la version 7.11, @babel/preset-env ignore @babel/plugin-proposal-export-namespace-from si le caller le supporte : cela permet de laisser export * as ns tel quel pour traitement direct par les bundlers. Note : babel-loader et @rollup/plugin-babel n'indiquent pas encore à Babel qu'ils supportent cette syntaxe, mais nous travaillons dessus avec les mainteneurs concernés.

Si { modules: false } est activé, Babel supposera que le code transpilé s'exécutera dans des moteurs supportant nativement ESM. export * as ns sera compilé selon les targets, comme toute autre fonctionnalité ECMAScript.

Si vous prévoyez de bundler le code transpilé, supprimez l'option { modules: false }. Par défaut, preset-env détermine les transformations de modules via les données caller transmises par babel-loader et @rollup/plugin-babel.

{
  "presets": [
    ["@babel/env", {
      "targets": ["defaults"],
-     "modules": false,
    }]
}

Si vous spécifiez une valeur différente pour l'option modules, export * as ns sera toujours transformé.

Si vous utilisiez directement l'un des

  • @babel/plugin-proposal-export-namespace-from

  • @babel/plugin-proposal-logical-assignment-operators

  • @babel/plugin-proposal-numeric-separators

vous pouvez les supprimer de votre configuration car ils seront inclus par défaut :

{
  "presets": [
    ["@babel/env", { "targets": ["defaults"] }]
  ],
  "plugins": [
-   "@babel/plugin-proposal-export-namespace-from",
-   "@babel/plugin-proposal-logical-assignment-operators",
-   "@babel/plugin-proposal-numeric-separators"
  ]
}

Prise en charge de TypeScript 4.0 (#11760)​

TypeScript 4.0 introduit plusieurs nouvelles fonctionnalités.

Types de tuples variadiques​

Vous pouvez désormais spécifier des spreads génériques dans les types de tuples, et ces spreads peuvent être placés n'importe où :

type Arr = readonly any[];

function collect<L extends Arr, M extends Arr>(b: boolean, l: L, m: M): [boolean, ...L, ...M] {
  return [b, ...l, ...m];
}

Éléments de tuples étiquetés​

Les éléments de tuples peuvent désormais être étiquetés :

type Log = [failed: boolean, reason?: Error, ...stacks?: string[]]
// same as
type Log = [boolean, Error?, string[]?];

unknown pour les liaisons de clause catch​

Vous pouvez spécifier le type unknown pour les variables des clauses catch :

try {
  // ...
} catch (e: unknown) {
  // type error! Error() only accepts string | undefined
  throw new Error(e);

  if (typeof e === "string") {
    // e is a string
    throw new Error(e);
  }
}

Notez que seuls unknown et any sont actuellement autorisés dans les annotations de type des liaisons catch. @babel/parser n'applique pas cette vérification car ni les alias de type (type ANY = any) ni les intersections (any | unknown) ne sont évalués à la compilation.

À partir de Babel 7.11, vous pouvez utiliser ces nouvelles fonctionnalités sans aucune modification de configuration. Pour plus d'informations, consultez l'annonce de TypeScript 4.0.

Prise en charge du littéral décimal dans le parseur (#11640)​

La proposition de littéraux décimaux (Stage 1) fournit une notation pour les nombres décimaux, analogue à BigInt et aux entiers.

JavaScript
0.1m + 0.2m === 0.3m; // true

Babel prend désormais en charge l'analyse de ces littéraux : vous pouvez ajouter le plugin @babel/plugin-syntax-decimal à votre configuration Babel ou, si vous utilisez @babel/parser directement, activer le plugin decimal. Babel ne fournit pas d'implémentations polyfill pour les décimaux.

Affichage de la configuration (#11588)​

Babel peut être configuré de plusieurs manières (programmatiquement et via des configurations JSON/JavaScript). Cette flexibilité a cependant un coût : il peut être difficile de comprendre quels fichiers de configuration s'appliquent dans votre projet et comment Babel fusionne ces configurations. Vous pouvez également utiliser Babel indirectement via un package dans vos node_modules qui génère la configuration. Tous ces cas d'usage montrent la nécessité d'un moyen pour afficher les informations de configuration afin de déboguer les problèmes de compilation.

Babel 7.11 propose une variable d'environnement à cet effet :

Shell
# *nix or WSL
BABEL_SHOW_CONFIG_FOR=./src/myComponent.jsx npm start
$env:BABEL_SHOW_CONFIG_FOR = ".\src\myComponent.jsx"; npm start

affichera la configuration effective appliquée à src/myComponent.jsx.

Consultez la documentation de configuration pour les détails d'utilisation et des exemples de sortie.

@babel/eslint-parser (#10709)​

babel-eslint a été déplacé vers le monorepo Babel sous un nouveau nom : @babel/eslint-parser. Il offre une meilleure intégration entre Babel et ESLint, ainsi qu'une prise en charge complète d'ES2020. Dans l'article de blog État de babel-eslint, Kai a détaillé l'état actuel de @babel/eslint-parser.