Javascript 我可以在同一代码库中同时使用ES6和ES5吗?

Javascript 我可以在同一代码库中同时使用ES6和ES5吗?,javascript,reactjs,gulp,browserify,babeljs,Javascript,Reactjs,Gulp,Browserify,Babeljs,我有以下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'}))

我有以下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']);
});
如您所见,我有两个需要转换的源文件。ScheduleMain.js是用es5编写的,构建得很好。我想在es6中编写我的新应用程序(ConfidenceMain.js),并可能将其转换为es5进行构建。我对如何做到这一点有点困惑(或者更确切地说,如果有人建议的话)


底线:尽管以前在同一代码库中为其他项目编写了es5代码,但我是否可以继续使用es6语法编写的新react项目?

是的,您可以混合使用es6和es5-es6完全向后兼容,因此基本上您可以将整个应用程序视为es6,但只在新代码中使用新的语法和功能

您需要在gulp管道中添加一个transpilation步骤,以便将代码通过babel并编译到ES5。大概是这样的:

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']);
});
请注意,上面的代码无法传输ScheduleMain.js,但如果您愿意,您可以轻松做到这一点,以支持ES6功能的使用—只需以相同的方式通过管道将其传输到
babel()

请注意,巴别塔将需要一些配置-将指导您完成此操作。您将需要和预设

编辑:如果您使用browserify,一种更干净的方法可能是使用转换:

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

您的底线与标题问题冲突:/n如果使用了Babel,则不再需要reactify。。。(如果Babel配置正确的话)。很好,我错过了。考虑到browserify的使用,另一个选择是使用其babelify转换。不完全向后兼容(但几乎):