En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies pour réaliser des statistiques de visites. X

Contact

N'hésitez pas si vous avez une questions, une idée ou tout à autres choses à nous dire ! Vous pouvez également directement nous envoyer un mail à contact@lilleweb.fr.

Ahhhh ECMAScript 6, cette petite révolution dans le monde du JavaScript qui commence à se démocratiser dans la plupart des projets (malgré le peu de support des navigateurs). Pour information, ES6 a reçu pour nom officiel ES2015, en effet, ils ont préféré partir sur l’année afin de modifier le standart plus facilement (des nouveautés chaque année ?).

Comme je le disais, ES2015 est actuellement très peu supporté par l’ensemble des navigateurs c’est à dire Chrome et Firefox en majorité mais cela reste assez partiel si l’on en croit cette table de compatibilité.

Un transpiler

Si nous voulons que notre code soit supporté par les anciens navigateurs, il nous faut utiliser un transpiler ou plus simplement appelé compilateur source à source. Le principe est très simple, le transpiler va lire le code ES2015 et le transformer en ES5 que nous connaissons tant.

Comme pour les frameworks, il en existe un sacré paquet ! Celui que j’ai retenu est Babel pour son site avec une documentation très bien fournie et un support très complet dont différents tasks runners connus (Gulp et Grunt). Pour les plus anciens, Babel était appelé 6to5.

Si vous avez quelques trous de mémoire avec la nouvelle version d’ECMAScript, vous pouvez toujours passer par leur très bon tutoriel.

Installation

Pour installer Babel, vous devez avoir Node.js sur votre machine étant donné que nous passons par npm pour l’installation.

Ouvrez un terminal, et exécutez cette commande :

  npm install -g babel

Pour rappel, l’option -g permet à npm d’installer le module sur votre ordinateur de façon global et y accéder depuis un alias (ici babel).

Utilisation

Très simple d’utilisation, il vous suffit d’utiliser la commande babel suivi du fichier que vous voulez convertir par exemple :

  babel app.js
Attention ! Cela ne modifie pas le fichier que vous lui passez. Les modifications seront passées dans STDOUT, il vous suffit alors de rediriger le flux de sortie vers un autre fichier comme ceci :
  babel app.js > es5_app.js

Si vous regardez le fichier es5_app.js de plus pret, vous verrez que toutes les fonctionnalités de ES2015 ont été remplacé par celle de ES5.

Utiliser Babel avec un task runner

J’aime travailler avec un task runner comme Gulp. Il est tout aussi simple, d’incorporer Babel dans vos projets avec Gulp. En effet, il vous suffit d’effectuer les modifications dans le pipe des fichiers JavaScript.

Pour utiliser Babel avec Gulp, vous devez installer le module gulp-babel via npm

npm i gulp-babel --save-dev.

Voici un simple fichier d’exemple :

var gulp = require('gulp'),
watch = require('gulp-watch'),
babel = require('gulp-babel'),
source = require('vinyl-source-stream');

gulp.task('js', function() {
return gulp.src('./app.js')
.pipe(babel())
.pipe(gulp.dest('./dist'));
});

gulp.task('default', function() {
gulp.watch('./app.js', ['js']);
});

On commence par récupérer le contenu du fichier app.js pour ensuite transformer le contenu via un pipe et finir en renvoyant le tout dans un dossier dist. Un jeu d’enfant non ?

Bonus - Browserify et React

Allez en petit bonus, voici un Gulpfile que j’utilise pour m’amuser avec React. Si vous avez des idées d’améliorations n’hésitez pas ! Le repo du site est sur Github

var gulp   = require('gulp'),
watch = require('gulp-watch'),
babelify = require('babelify'),
browserify = require('browserify'),
notify = require('gulp-notify'),
source = require('vinyl-source-stream');


gulp.task('js', function() {
browserify({
entries: './app.js',
debug: true
})
.transform(babelify)
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('./dist'))
.pipe(notify('JS task end'));
});

gulp.task('default', function () {
gulp.watch(['./components/**/*.js', './app.js'], ['js'])
});
Thomas DECONINCK Thomas DECONINCK Profil Github de Thomas DECONINCK

Développeur front-end à altima°, Thomas est un grand passionné de JavaScript mais également de nouvelles technologies ! Il aime participer à des débats sensibles comme la supériorité d'Ember face à Angular ou encore l'indentation avec des espaces plutôt que des tabulations.
C'est également un grand fan de manga qui n'hésitera pas à vous parler de ses dernières découvertes !

comments powered by Disqus

Partager