14 oct. 2016

Transpiler du JS ES6 en ES5 avec Babel dans une tache Gulp

Pour transpiler de l'ES6 vers de l'ES5, Babel est un outil de référence. Dans les process de build automatisés en JS, il est souvent nécessaire de transpiler le JS ES6 vers une version antérieure de JS car les navigateurs n'ont pas encore tous implémentés les nouvelles spécifications.

Prérequis : Avoir NodeJS installé.

Pour installer Gulp : https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

Installer le module Babel


Dans le répertoire du projet pour lequel vous souhaitez configurer Babel, lancez la commande suivante :

npm install --save-dev gulp-babel babel-preset-es2015

Cette commande permet d'installer Gulp-Babel, avec les presets d'ES5 (vers lequel on va vouloir transpiler), en tant que dépendance de dev du projet.

Utiliser Babel dans une tâche



// On importe gulp-babel
var babel = require('gulp-babel');

gulp.task('build', function() {
    return gulp.src('folder_avec_es6_scripts')
        // on transpile vers de l'ES5
        .pipe(babel({
            presets: ['es2015']
        }))
        .on('error', console.error.bind(console))
        .pipe(gulp.dest('folder_de_destination_es5'));
});