Version 6.16.0 publiée

28 septembre 2016 · 9 min de lecture

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 →

Happy Birthday Babel 🎂 !

Happy 2nd birthday @babeljs
— Sebastian McKenzie (@sebmck) September 28, 2016

. ; :```` : :; ````;,```` ````;,```` ::, ````:,: :,:````` :,,: ````:.,,```` ````:.,,```` ````:..,.```` ````,,..: ,,..:````` ```.,.`,: :.`.,````` :..,````` ```.,..: :..,.```` ````:..,. ```.,...: .:...,.``` .:...,. ::,,,.,,,:` `:,,,.,,,:, `:,,,.,,,:: :,,.......,: :,.......,,, :,.......,,: :,........., ;++`............;++` ,.........,: :.````````.. '+'+'```````````,+'++` ..````````.: ;,````````.,.+'''',`````````.,''++' ,.````````,: ;,.` ``.,++'''',.`` ``.,''''+,,.`` `.,: :,.`` ..+''''+,. .,'''++;,. ``.,: `:,.`` ..+''''',. .,''''+',. ``.,: +,..`` ..+++''+,. .,+''++;,. ``..:, ,:+,. ..++++++,. .,+++++.,. .,+,` ,,.'',. .,`;+++',. .,+++'.`,. .,+.,: `,,.`++,. .,``...`,. .,...,. .,+..,: ,,..``'+,.``` ```.,``````,.``` ```.,``````,.``` ```.,+```.,: :,.```.,+,.``` ```.,``````,.``` ```.,``````,.``` ```.,'.```.., :,..,,.``` ```.,``````,.``` ```.,``````,.``` ```.,.``````., ,,.```````.,.``` ```.,``````,.``` ```.,``````,.``` ```.,```````..: ,.`````````,.``` ```.,``````,.``` ```.,``````,.``` ```.,````````.,: :,.```````` ,.``` ```.,``````,.``` ```.,``````,.``` ```., ````````., ,.```````.''+'``` ```., ,. .,,.``` ``,''+'```````.,. ,.```````+'''';`` ```., `````,.``` ``..,,. ``+'''';```````,: ,.``````'+''''+ .,``````,. ..,``````,. '+''''+```````.: ,.``````+'''''':`````.., `````,..`````..,,``````,..`````+'''''',``````,: ,.``````+'''''+'.```..,````````,.....,,,...``.+'''''+'`````.,, :.``````+'''''+'......```` ```.......``` `````......+'''''+'`````., :.`````.+++++'+:.....````.''+' ```....```.''+' ````.....+++++'+:`````., ,,.````.:+++++'``````````+'''';``````````+'''';`````````,+++++'..````., .,.````..,;';,.`````````'+''''+ '+''''+ `````````.:';:..`````.: ,.....```````````+'''''', +'''''',```````````....: ,.`````````````````````+'''''+' +'''''+'.,, ,.`````````````````````+'''''+'````````+'''''+'.,. :.+++++'+:``` ````+++++'+:````````````````````.,` :..````````````````````,+++++'```` ````,+++++'., ,,..:';,.``` ````.:';,.., .,. ````````````` ```````````````.: `,.```````````````````` ``````` `````` ` ````````````````..: ,..``````````````````` ````````````````````.,: ,...`````````````````````` ``` ```````````````````````````.,, :....````````````````````````````````````````````````````````````.,. :,.....`````````````````````````````````````````````````````````.., :,......`````````````````````````````````````````````````````.....: ,,........```````````````````````````````````````````````````.....: .,........```````````````````````````````````````````````````....,: ,..........```````````````````````````````````````````````......,: :...........`````````````````````````````````````````````.......,: :,...........````````````````````````````````````````````.......,, :,..........``````````````````````````````````````````..........,` :,............````````````````````````````````````````..........: :,............````````````````````````````````````````.........,: .,..............```````````````````````````````````............,: `,,..............``````````````````````````````````............,: :,...........`..````````````````````````````````..............,: :,..............````````````````````````````````..............:. ,,,...........................,: :,.............````````````````````````````````............,:, :,.............````````````````````````````..............,,: .:,............```````````````````````````..............,:: .:,,..........````````````````````````````............,:: :,,..........````````````````````````.............,,:, ,:,,.........``````````````````````............,,:; ::,,........``````````````````.............,,:: ,::,,........``````..``............,,,:;` :::,,,........`.............,,,:::. ,:::,,,,..............,,,,,:::: .::::::,,,,,,,::::::,`

Difficile de croire que cela fait déjà 2 ans ! Un immense merci à Sebastian pour avoir créé ce projet extraordinaire !

Nous avons beaucoup grandi :

200+ contributeurs
Environ 113 versions depuis la 6.0.0 et 512 versions au total.
~4,5 millions de téléchargements de babel-core le mois dernier
1400+ résultats pour babel-plugin sur npm
700+ résultats pour babel-preset sur npm
4500+ utilisateurs sur notre Slack

Un grand merci d'utiliser et de contribuer à notre communauté !

Si vous n'avez pas vérifié récemment, nous sommes revenus sur GitHub Issues ! Tout cela grâce à @danez

Comme la plupart des projets open source, Babel est maintenu par quelques personnes travaillant sur leur temps libre. Nous travaillerons à faciliter les contributions de diverses manières (pas seulement sur le code principal).

Les propos d'Evan Czaplicki dans Code is the Easy Part sont très pertinents pour tout projet, grand ou petit. Une grande partie de la contribution consiste simplement à parler, utiliser et écrire sur le projet.

Dans cette optique, nous devrions créer une page de ressources organisée et à jour, et peut-être une newsletter pour parler des choses géniales créées avec Babel (un nouveau plugin, un nouvel outil ou même une simple idée).

Nous espérons pouvoir collaborer davantage avec TC-39 comme nous le faisons avec les propositions actuelles tc39/ecma262 et nos presets/plugins stage-x. Nous devrions envisager d'exécuter test262 avec Babel.

Nous avons également publié Babili, notre minifier et commencé à travailler sur babel-preset-env, l'"autoprefixer" pour Babel.

L'avenir de Babel est prometteur !

👓 Conformité aux spécifications

#3473 via #4576 Ajout de la prise en charge des fonctions génératrices asynchrones et des instructions for-await. (@zenparsing)

Cette implémentation correspond à la proposition d'itération asynchrone, actuellement au stade 2 (et prévue pour passer au stade 3 lors de la réunion actuelle de TC-39). Elle inclut les fonctionnalités suivantes :

Transforme les fonctions génératrices asynchrones (async function* g() { }) en fonctions génératrices encapsulées, similairement à la transformation async-to-generator actuelle.

JavaScript
async function* agf() {
  await 1;
  yield 2;
}

Transforme les instructions for-await en boucles for contenant des expressions yield.

JavaScript
async function f() {
  for await (let x of y) {
    g(x);
  }
}

Exemple d'utilisation

JavaScript
async function* genAnswers() {
  var stream = [ Promise.resolve(4), Promise.resolve(9), Promise.resolve(12) ];
  var total = 0;
  for await (let val of stream) {
    total += await val;
    yield total;
  }
}

function forEach(ai, fn) {
  return ai.next().then(function (r) {
    if (!r.done) {
      fn(r);
      return forEach(ai, fn);
    }
  });
}

var output = 0;
return forEach(genAnswers(), function(val) { output += val.value })
.then(function () {
  assert.equal(output, 42);
});

#4500 Prise en charge des propriétés de classe calculées. (@motiz88)

La prise en charge du parseur a été ajoutée dans babylon@6.11.0 via babel/babylon#121

JavaScript
// Example
class Foo {
  [x]
  ['y']
}

class Bar {
  [p]
  [m] () {}
}

#3702 Flow : génération d'annotations de type objet exact. (@bhosmer)

La prise en charge du parseur a été ajoutée dans babylon@6.10.0 via babel/babylon#104

JavaScript
// Example
var a : {| x: number, y: string |} = { x: 0, y: 'foo' };

🚀 Nouvelle fonctionnalité

#3561 babel-core : ajout d'options pour un parseur ou générateur différent. (@hzoo)

Babel prend désormais également les options : parserOpts et generatorOpts (sous forme d'objets).

parserOpts transmettra toutes les propriétés au parseur par défaut babylon. Vous pouvez également passer une option parser pour utiliser un parseur différent.

Cela permet de transmettre n'importe quelle option de babylon's :

JavaScript
{
  "parserOpts": {
    "allowImportExportEverywhere": true,
    "allowReturnOutsideFunction": true,
    "sourceType": "module",
    "plugins": ["flow"]
  }
}

Vous pouvez également transmettre parserOpts.parser et generatorOpts.generator. Cela permet d'utiliser recast avec Babel.

Recast est utilisé dans jscodeshift, un outil pour créer des codemods. Vous connaissez peut-être ces outils car l'équipe React en publie également pour faciliter les conversions entre versions de React.

recast

JSON
{
  "parserOpts": {
    "parser": "recast"
  },
  "generatorOpts": {
    "generator": "recast"
  }
}

Babel en tant que compilateur comporte 3 étapes : parsing, transformation et génération.

À haut niveau, le processus est :

parsing : transformer une chaîne (code source) en JSON
transformation (plugins) : transformer le JSON en une structure JSON différente
génération de code : transformer le JSON en chaîne (code généré)

La dernière étape de Babel est le générateur de code. Traditionnellement, il ne se soucie pas du formatage du code (espaces, guillemets, etc.), car le code généré est votre code "compilé" qui ira dans le répertoire dist et sera minifié ultérieurement.

Mais que faire si vous voulez écrire un plugin Babel qui transforme votre code source et le réécrit dans le même répertoire (babel src -d src au lieu de babel src -d lib) ? Vous voudriez un diff lisible où le plugin modifie uniquement le nécessaire en respectant votre style.

C'est utile pour créer des plugins transformant le code source lui-même. Un cas d'usage est le projet lebab, l'inverse de Babel (anciennement appelé 5to6). Actuellement, ce n'est pas un plugin Babel, d'où notre volonté de supporter ce cas d'usage.

Une fois benjamn/recast#299 et benjamn/ast-types#162 fusionnés, vous pourrez créer vos propres codemods avec Babel !

#4542 Ajout de la prise en charge des raccourcis d'organisation des presets. (@nkt)

JavaScript
{
  presets: ["@org/babel-preset-name"], // actual package
  presets: ["@org/name"] // shorthand name
}

#4491 Ajout de l'option useBuiltIns pour l'opérateur rest des objets. (@hzoo)

useBuiltIns - N'utilise pas les helpers de Babel et se contente de transformer pour utiliser la méthode native (désactivé par défaut).

JavaScript
{
  "plugins": [
    ["transform-object-rest-spread", { "useBuiltIns": true }]
  ]
}

// source
z = { x, ...y };
// compiled
z = Object.assign({ x }, y);

#4561 babel-code-frame : ajout d'options pour linesBefore, linesAfter. (@hzoo)

babel-code-frame est un package autonome que nous utilisons dans Babel pour signaler les erreurs.

Il est désormais possible de spécifier le nombre de lignes à afficher avant et après l'erreur.

JavaScript
  1 | class Foo {
> 2 |   constructor()
    |                ^
  3 | }

#3695 via #4566 Autorisation des exports par défaut ES6 pour les presets (@johanssj)

Nous utilisions auparavant des exports CommonJS pour les presets.

babel.config.js
module.exports = {
  plugins: [
    require("babel-plugin-syntax-trailing-function-commas")
  ]
};

Vous pouvez désormais également utiliser export default.

JavaScript
import syntaxTrailingCommas from "...";
export default {
  plugins: [
    syntaxTrailingCommas
  ]
};

💅 Améliorations

#4572, #4579 Amélioration des couleurs de la coloration syntaxique. (@lydell)

Avant

Après

🐛 Corrections notables

#3686 Correction de typeof Symbol.prototype. (@brainlock)

JavaScript
// `typeof Symbol.prototype` should be 'object'
typeof Symbol.prototype === 'object'

#4507 Définition des options dans babel-cli uniquement si différentes des valeurs par défaut. (@danez)

Correction d'un problème où les valeurs par défaut n'étaient pas écrasées, ce qui empêchait le bon fonctionnement d'options comme comments: false.

#4524 Correction de l'export par défaut avec les fonctions fléchées et le nommage des fonctions. (@danharper)

// this wasn't exporting correctly before
export default ({ onClick }) => {
  return <div onClick={() => onClick()}></div>;
}

#4518 Correction des classes exportées par défaut sans nom. (@danez)

JavaScript
export default class {};
// wasn't correctly transforming to
exports["default"] = class {}
// with the es3-transforms

#4521 Correction du retrait des typeParameters dans les fonctions fléchées. (@danez)

JavaScript
// <X> wasn't stripped out
const find = <X> (f: (x:X) => X, xs: Array<X>): ?X => (
  xs.reduce(((b, x) => b ? b : f(x) ? x : null), null)
)

#4552 Correction de l'évaluation de la déstructuration avec les appels de fonction. (@danez)

Nous avons constaté que cette optimisation ne peut être appliquée en présence d'appels de fonction ou d'expressions d'accès aux membres dans le membre droit de l'affectation, car ces opérations pourraient modifier les variables ciblées par l'affectation.

JavaScript
[x, y] = [a(), obj.x];
// was transforming to
x = a();
y = obj.x;
// now transforms to
var _ref = [a(), obj.x];
x = _ref[0];
y = _ref[1];

#4587 Empêche flow-strip-types/flow-comments de supprimer entièrement les ClassProperty. (@danharper)

Consultez GitHub pour le reste du journal des modifications !

👓 Conformité aux spécifications​

🚀 Nouvelle fonctionnalité​

💅 Améliorations​

🐛 Corrections notables​

👓 Conformité aux spécifications

🚀 Nouvelle fonctionnalité

💅 Améliorations

🐛 Corrections notables