Aller au contenu principal

7.15.0 Disponible : Pipelines de style Hack, enums const TypeScript et support de la cible Rhino

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

Cette version permet par défaut le parsing du top-level await (Stage 4 lors de la réunion de mai) et la transformation des vérifications ergonomiques de marque pour les champs privés (Stage 4 lors de la réunion de juillet). Elle introduit également le support de l'opérateur pipeline de style Hack. Nous avons aussi amélioré notre support TypeScript avec la transformation des const enums et des alias de namespaces, et étendu nos heuristiques pour ajouter .displayName aux composants React créés par React.createContext() (#13501).

Nous avons également introduit une nouvelle hypothèse de compilation, noIncompleteNsImportDetection, pour produire un résultat plus compact lors de la compilation de modules ECMAScript vers CommonJS sans se soucier des imports de namespaces partiellement initialisés causés par des cycles de modules.

De plus, vous pouvez désormais spécifier Rhino comme cible de compilation.

Vous pouvez consulter le journal complet des modifications sur GitHub.

Nous sommes extrêmement reconnaissants pour le soutien manifesté par la communauté ces derniers mois, depuis notre mise à jour sur le financement en mai. Contactez-nous à team@babeljs.io pour discuter de parrainages !

Principales fonctionnalités​

Fonctionnalités ECMAScript activées par défaut​

Lors des deux dernières réunions, les propositions du top-level await et des vérifications ergonomiques de marque pour les champs privés ont atteint le Stage 4.

JavaScript
import * as db from "database";

await db.connect(); // top-level await

class DBConnector {
  #password;
  static isConnector(obj) {
    return #password in obj; // ergonomic brand checks
  }
}

Babel les prend désormais en charge par défaut, vous pouvez donc retirer les plugins suivants de votre configuration :

  • @babel/plugin-syntax-top-level-await

  • @babel/plugin-syntax-private-property-in-object

  • @babel/plugin-proposal-private-property-in-object

Notez que Babel ne peut actuellement que parser le top-level await sans pouvoir le transformer.

Nouvelles fonctionnalités TypeScript (#13324, #13528)​

TypeScript 4.4 n'introduit aucune nouvelle syntaxe que nous aurions dû implémenter, à part une restriction mineure : vous ne pouvez pas spécifier la valeur d'un champ de classe abstraite.

abstract class C {
    abstract prop = 1; // now a SyntaxError!
}

Cependant, nous avons ajouté deux fonctionnalités TypeScript manquantes depuis longtemps : les const enums et les alias de namespaces (import Alias = Namespace).

Auparavant, nous affichions une erreur lors de l'utilisation des const enums car elles nécessitent des informations de type pour être correctement compilées. Comme solution alternative, la communauté a développé des plugins comme babel-plugin-const-enum. Babel ignore désormais le modificateur const lors de la compilation des enums, ce qui correspond au comportement de TypeScript avec l'option --isolatedModules.

Pour obtenir un résultat plus optimisé similaire au code généré par défaut par TypeScript, vous pouvez activer l'option optimizeConstEnums de @babel/plugin-tranform-typescript ou @babel/preset-typescript.

// Input
const enum Animals { Dog }
console.log(Animals.Dog);

// Output (default)
var Animals;
(function (Animals) {
  Animals[Animals["Dog"] = 0] = "Dog";
})(Animals || (Animals = {}));

console.log(Animals.Dog);

// Output with `optimizeConstEnums`
console.log(0);

Prise en charge de l'opérateur pipeline de style Hack (#13191, #13416)​

Les « pipelines de style Hack » représentent une nouvelle variante de la proposition d'opérateur pipeline, destinée à remplacer la variante « smart mix ».

Les pipelines de style Hack imposent l'utilisation systématique d'un « jeton thématique » (comme #) pour référencer la valeur de l'étape précédente du pipeline :

JavaScript
// Input
"World"
  |> `Hello, ${#}!`
  |> alert(#);

// output
var _ref, _ref2;

_ref2 = (_ref = "World", `Hello, ${_ref}!`), alert(_ref2);

Vous pouvez tester cette proposition en activant l'option proposal: "hack" dans @babel/plugin-proposal-pipeline-operator. Vous devez également choisir le jeton thématique à utiliser entre "#" et "%" :

babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", {
      "proposal": "hack",
      "topicToken": "#"
    }]
  ]
}

Préparation de @babel/eslint-parser pour Babel 8 (#13398)​

Nous avons poursuivi progressivement nos travaux sur Babel 8 ces derniers mois. Nous ne sommes pas encore prêts pour une version bêta de Babel 8, mais nous commençons à exposer les premiers changements expérimentaux.

Nous prévoyons de convertir entièrement Babel de CommonJS vers des modules ECMAScript, mais cela pose un problème : le chargement de la configuration deviendra plus fréquemment asynchrone, alors que @babel/eslint-parser ne fonctionne que de manière synchrone (car ESLint ne prend en charge que des analyseurs synchrones).

@babel/eslint-parser 7.15.0 expose un nouveau point d'entrée : @babel/eslint-parser/experimental-worker. Il déplace le chargement de la configuration Babel et la tâche d'analyse vers un worker distinct, géré de manière synchrone depuis le thread principal, tout en prenant en charge le chargement asynchrone des configurations. Comme avantage immédiat pour Babel 7, cela permet d'utiliser des modules ECMAScript natifs pour les fichiers de configuration de Babel, même avec @babel/eslint-parser.

Vous pouvez nous aider en le testant dès maintenant dans vos projets existants et en signalant tout bug sur notre page de signalement :

JavaScript
// .eslintrc.js
module.exports = {
  parser: "@babel/eslint-parser/experimental-worker"
};
info

Ce point d'entrée nécessite Node.js >= 12.3.0