Discussion :

[vermine]

Babel 5.0.0 : le transpilateur ES6 sort sa plus grande révision majeure
qui supporte maintenant les propriétés de classe et les décorateurs

Babel est un transpilateur ECMAScript 6. Il transforme votre code ES6 en code ES5. Ce qui signifie que vous pouvez commencer à utiliser dès maintenant les nouvelles fonctionnalités du langage sans devoir attendre leur support par les navigateurs.

Babel sait compiler et traduire les éléments suivants :

• les raccourcis de fonction ;
• les fonctions asynchrones ;
• les classes ;
• la destructuration ;
• les décorateurs ;
• let ;
• etc.

Mais Babel, c'est également une interaction avec d'autres outils JavaScript (ou non) comme React, NodeJS, Rails, Browserify. Etant compatible avec les principaux navigateurs, Babel peut également être étendu par divers plugins.

Notons par exemple son utilsation par Mozilla et Neflix.

L'équipe a annoncé la sortie de la version 5.0 qui est donc une révision majeure et la plus importante jusqu'à présent. Actuellement, nous en sommes même à la révision 5.0.9.

Au cours des derniers mois, Babel a été bien accueilli dans plusieurs grandes communautés. On parlait de NodeJS, Rails et React mais nous pouvons également citer Ember, Backbone, AngularJS et bien d'autres. De plus, un intérêt particulier a été montré par Yahoo!, Atom, CloudFlare, etc.

Et ce n'est pas pour rien. Cette version contient des propositions de ES7 : les décorateurs, les propriétés de classe et une extension des exports.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function concat(...args) {
  let sep = args.pop();
 
  return function(target, key, descriptor) {
    descriptor.initializer = function() {
      return args.map(arg => this[arg]).join(sep);
    }
  }
}
 
function autobind(target, key, descriptor) {
  var fn = descriptor.value;
  delete descriptor.value;
  delete descriptor.writable;
  descriptor.get = function () {
    return this[key] = fn.bind(this);
  };
}
 
class Person {
  firstName = "Sebastian";
  lastName = "McKenzie";
 
  @concat("firstName", "lastName", " ") fullName;
  @concat("lastName", "firstName", ", ") formalName;
 
  @autobind
  getFullName() {
    return `${this.first} ${this.last}`;
  }
}
 
assert(new Person().fullName, "Sebastian McKenzie");
assert(new Person().formalName, "McKenzie, Sebastian");
assert(new Person().getFullName.call(null), "Sebastian McKenzie");

La version propose également :

• des améliorations pour React 0.14 comme des transformateurs d'optimisation pour JSX et les éléments inline ;
• une API Plugin qui permet de brancher ses propres transformateurs personnalisés ;
• l'amélioration du module UMD ;
• le parseur a été réécrit ;
• une meilleure performance lors de l'utilisation de IIFE (Immediately-Invoked Function Expression) ;
• la suppression de certaines fonctionnalités qui étaient en test ;
• etc.

D'après un article sur le blog officiel.


Et vous ?

Que pensez-vous de ce transpilateur ? En connaissez-vous d'autres ?
Utilisez-vous des fonctionnalités ES6 / ES7 ?