Version 7.5.0 : import dynamique et pipelines F#

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 publions aujourd'hui Babel 7.5.0 !

Cette version améliore le support de plusieurs propositions ECMAScript : la variante F# de l'opérateur pipeline (Stage 1) et un plugin officiel pour la proposition d'import() dynamique (Stage 4) avec support dans preset-env. Elle inclut également une prise en charge expérimentale des namespace TypeScript et de la requête default de Browserslist dans preset-env.

Consultez le changelog complet sur GitHub.

Merci à Wesley Wolfe, Martin Zlámal, Blaine Bublitz, Letladi Sebesho, Paul Comanici, Lidor Avitan, Artem Butusov, Sebastian Johansson et Min ho Kim pour leurs premières PRs !

Nous recherchons toujours de l'aide, notamment pour le tri des issues, la revue des pull requests et l'assistance sur Slack. Nous testons le nouveau rôle triage mis en œuvre par GitHub, et souhaitons reconnaître les contributeurs qui nous soutiennent activement ! 😉

Exemple remarquable avec nos nouvelles recrues chez Babel : Tan Li Hau, qui a grandement contribué au tri des issues et au débogage, et Thiago Arrais, qui a participé à l'implémentation de l'opérateur pipeline !

Autre actualité : nous venons d'annoncer le lancement de notre podcast ! Si vous l'avez manqué, consultez notre publication d'hier !

Nos travaux sont rendus possibles grâce à nos sponsors. Nous remercions Discord et clay pour leur parrainage Argent sur OpenCollective, ainsi que Linkedin pour son soutien Argent à Henry sur GitHub !

Remerciements spéciaux à Handshake, protocole décentralisé de nommage compatible avec DNS, pour son don de 100 000 $ l'an dernier ! Dans le cadre de leur subvention FOSS, ils ont alloué 10,2 millions de dollars à des communautés open source comme Apache, Debian, EFF et Babel.

Si vous ou votre entreprise souhaitez soutenir Babel et l'évolution de JavaScript, parrainez-nous sur Open Collective ou collaborez directement à l'implémentation des nouvelles propositions ECMAScript ! Projet bénévole, nous dépendons de votre soutien pour financer nos efforts et maintenir le code. Contactez Henry à henry@babeljs.io pour en discuter !

Opérateur pipeline F# (#9450 et #9984)

attention

La proposition de l'opérateur pipeline est toujours au Stage 1, et sa spécification est donc encore en cours de définition.

Cette proposition comporte plusieurs variantes en cours d'étude. En testant ce plugin, vous pouvez aider les auteurs de la proposition à recueillir des retours sur le fonctionnement des pipelines. Notez cependant qu'un refactoring sera nécessaire si la sémantique évolue pendant le processus de proposition (ce qui est probable).

Depuis la version 7.3.0, Babel prenait en charge la variante Smart de l'opérateur pipeline, et la variante "minimale" depuis la 7.0.0-beta.

Grâce aux efforts conjoints de Thiago Arrais et James DiGioia, vous pouvez désormais tester la variante F# ! Si vous avez des remarques sur cette variante spécifique, vous pouvez contacter James.

En quoi la variante F# diffère-t-elle de Smart ? Plutôt que d'utiliser des "références topic" (#), elle emploie des fonctions fléchées. Cela offre l'avantage d'être plus proche du JavaScript actuel, au prix d'une syntaxe légèrement moins concise.

Current JavaScript	F# pipeline	Smart pipeline
JavaScript let newScore = boundScore( 0, 100, add(7, double(person.score)) );	JavaScript let newScore = person.score |> double |> n => add(7, n) |> n => boundScore(0, 100, n);	JavaScript let newScore = person.score |> double |> add(7, #) |> boundScore(0, 100, #);

Bien que les deux propositions soient indépendantes, vous pouvez combiner les pipelines F# avec l'application partielle (prise en charge depuis Babel 7.4.0) :

JavaScript

let newScore = person.score
  |> double
  |> add(7, ?)
  |> boundScore(0, 100, ?);

Notez que, bien que similaire en apparence à la variante "Smart", la proposition d'application partielle ne supporte ? que dans les paramètres d'appel de fonction. Ainsi, person |> #.score est valide en "Smart" mais son équivalent F# nécessite une fonction fléchée : person |> p => p.score.

L'opérateur pipeline F# diffère également dans sa gestion de await :

Current JavaScript	F# pipeline	Smart pipeline
JavaScript let id = ( await ( await fetch(url) ).json() ).ID;	JavaScript let newScore = fetch(url) |> await |> r => r.json() |> await |> obj => obj.ID;	JavaScript let newScore = fetch(url) |> await # |> #.json() |> await # |> #.ID;

Pour tester cette nouvelle variante, ajoutez @babel/plugin-proposal-pipeline-operator à votre configuration Babel :

JavaScript

module.exports = {
  plugins: [
    ["@babel/proposal-pipeline-operator", { proposal: "fsharp" }]
  ]
};

Vous pouvez aussi l'expérimenter dans le REPL en activant le preset "Stage 1".

Import dynamique (#9552 et #10109)

Bien que Babel prenne en charge l'analyse syntaxique des imports dynamiques import(source) depuis longtemps, leur transformation n'était pas homogène.

• Avec webpack ou rollup, on utilisait seulement @babel/plugin-syntax-dynamic-import sans transformation Babel

• Avec Node, on pouvait utiliser le plugin babel-plugin-dynamic-import-node

• Avec SystemJS, @babel/plugin-transform-modules-systemjs transformait automatiquement import() avec @babel/plugin-syntax-dynamic-import

La proposition d'import dynamique ayant été intégrée à la spécification principale, nous unifions désormais ces cas d'usage via un point d'entrée unique : @babel/plugin-proposal-dynamic-import. Ce plugin doit être utilisé avec un plugin de transformation de modules car Babel doit connaître votre système de chargement cible. Pour CommonJS, il délègue en interne à babel-plugin-dynamic-import-node.

Exemple de configuration valide :

JavaScript

module.exports = {
  plugins: [
    "@babel/plugin-proposal-dynamic-import",
    "@babel/plugin-transform-modules-amd"
  ]
};

Alors que celle-ci ne l'est pas :

JavaScript

module.exports = {
  plugins: [
    "@babel/plugin-proposal-dynamic-import"
  ]
};

Si vous souhaitez uniquement autoriser l'analyse syntaxique des expressions import() sans les transformer, vous pouvez simplement inclure le package @babel/plugin-syntax-dynamic-import.

Si vous utilisez @babel/preset-env, la prise en charge de l'import dynamique sera activée par défaut. Vous n'avez pas à vous soucier de la compatibilité avec webpack ou rollup, car babel-loader et rollup-plugin-babel désactivent automatiquement la transformation Babel pour permettre au bundler de la gérer correctement.

Requête defaults de Browserslist dans @babel/preset-env (#8897)

Lorsque @babel/preset-env ne reçoit aucune cible (targets), il applique toutes les transformations syntaxiques à votre code (reproduisant le comportement désormais déprécié de babel-preset-latest).

Pour prendre en charge ce comportement, nous avons dû contourner le fait que Browserslist possède ses propres choix par défaut. Cela empêchait @babel/preset-env d'utiliser la requête default.

@babel/preset-env prend désormais en charge la requête defaults lorsqu'on passe les cibles directement au preset :

JavaScript

module.exports = {
  presets: [
    ["@babel/preset-env", {
      targets: { browsers: "defaults" }
    }]
  ]
};

Vous pouvez également la configurer via un fichier .browserslistrc, utilisé par d'autres outils comme Autoprefixer ou Stylelint.

Le comportement par défaut de @babel/preset-env reste de tout compiler, mais nous pourrions basculer vers cette requête defaults dans Babel 8.

Prise en charge expérimentale des namespaces TypeScript (#9785)

Jusqu'à présent, les namespaces constituaient la deuxième fonctionnalité TypeScript majeure non prise en charge par Babel (la première étant la vérification de types ! 😛). Grâce au travail du membre de la communauté Wesley Wolfe, vous pouvez désormais activer une prise en charge expérimentale via l'option allowNamespaces de @babel/plugin-transform-typescript :

JavaScript

module.exports = {
  plugins: [
    ["@babel/plugin-transform-typescript", {
      allowNamespaces: true
    }]
  ]
}

Vous pouvez ensuite utiliser les namespaces dans votre code :

JavaScript

namespace Validation {
  const lettersRegexp = /^[A-Za-z]+$/;
  const numberRegexp = /^[0-9]+$/;

  export class LettersOnlyValidator {
    isAcceptable(s: string) {
      return lettersRegexp.test(s);
    }
  }
}

⚠️ Attention ⚠️

Lors de l'ajout initial du support TypeScript dans Babel, les namespaces avaient été exclus car ils nécessitent des informations de type que seul un compilateur TypeScript complet peut fournir. Pour cette raison, la prise en charge actuelle (expérimentale) présente certaines limitations :

• Les namespaces ne peuvent exporter que des liaisons immuables
• Lors de la fusion de plusieurs namespaces portant le même nom, leur portée n'est pas partagée

Vous trouverez la liste complète des mises en garde dans la documentation de @babel/plugin-transform-typescript.