Kann ich sowohl ES6 als auch ES5 in der gleichen Codebasis verwenden?

Question

Ich habe folgende gulpfile.js:

var gulp = require('gulp'); 
var browserify = require('gulp-browserify'); 
var concat = require('gulp-concat'); 

gulp.task('browserify', function() { 
    gulp.src('js/ScheduleMain.js') 
     .pipe(browserify({transform:'reactify'})) 
     .pipe(concat('ScheduleMain.js')) 
     .pipe(gulp.dest('static/dist/js')); 
    gulp.src('js/ConfidenceMain.js') 
     .pipe(browserify({transform:'reactify'})) 
     .pipe(concat('ConfidenceMain.js')) 
     .pipe(gulp.dest('static/dist/js')); 
}); 

gulp.task('default',['browserify']); 

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

Wie Sie sehen, habe ich zwei Quelldateien haben, die Umwandlung müssen. ScheduleMain.js ist in es5 geschrieben und baut gut. Ich möchte meine neue Anwendung (ConfidenceMain.js) in es6 schreiben und es möglicherweise in es5 für Build umwandeln. Ich bin ein wenig verwirrt, wie man das macht (oder eher, wenn es überhaupt empfohlen wird).

Endergebnis: Kann ich mit neuen in ES6-Syntax geschriebenen Reaktionsprojekten fortfahren, obwohl es zuvor Code ES5 für andere Projekte in der gleichen Codebasis?

Answer 1

Ja, Sie können sowohl ES6 als auch ES5 kombinieren - ES6 ist vollständig abwärtskompatibel, Sie können also Ihre gesamte App als ES6 betrachten, aber nur die neue Syntax und Funktionalität in neuem Code verwenden.

Sie müssten Ihrer Kultivierungspipeline einen Translationsschritt hinzufügen, um Ihren Code durch babel weiterzuleiten und ihn auf ES5 zu kompilieren. Etwas wie folgt aus:

var gulp = require('gulp'); 
var browserify = require('gulp-browserify'); 
var concat = require('gulp-concat'); 
var babel = require('gulp-babel'); 

gulp.task('browserify', function() { 
    gulp.src('js/ScheduleMain.js') 
     .pipe(browserify({transform:'reactify'})) 
     .pipe(concat('ScheduleMain.js')) 
     .pipe(gulp.dest('static/dist/js')); 
    gulp.src('js/ConfidenceMain.js') 
     .pipe(babel()) 
     .pipe(browserify({transform:'reactify'})) 
     .pipe(concat('ConfidenceMain.js')) 
     .pipe(gulp.dest('static/dist/js')); 
}); 

gulp.task('default',['browserify']); 

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

Beachten Sie, dass der Code oben nicht ScheduleMain.js transpile würde, aber man konnte leicht tun, wenn man wollte, die Verwendung von ES6 zu ermöglichen Funktionen geht vorwärts - gerade Rohr es durch babel() in der gleicher Weg.

Beachten Sie, dass babel eine Konfiguration benötigt - die documentation führt Sie durch diese. Sie werden die Voreinstellungen es2015 und react wollen.

bearbeitet: Ihre Verwendung von browserify Gegeben ein sauberen Ansatz könnte die babelify verwandeln, anstatt zu verwenden sein:

gulp.src('js/ConfidenceMain.js') 
    .pipe(browserify({transform:'babelify'})) 
    .pipe(concat('ConfidenceMain.js')) 
    .pipe(gulp.dest('static/dist/js'));