Question

我有以下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进行构建。我对如何做到这一点感到有点困惑（或者更确切地说，如果它完全被推荐）。

底线：我是否可以继续使用es6语法编写的新反应项目，尽管之前为同一代码库中的其他项目提供了es5代码？

Answer 1

是的，您可以混合使用ES6和ES5 - ES6完全向后兼容，因此基本上您可以将整个应用视为ES6，但只使用新代码中的新语法和功能。

您需要在您的gulp管道中添加一个转换步骤，以便将代码传递给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()进行管道传输

请注意，babel需要一些配置 - documentation将引导您完成此操作。您需要es2015和react预设。

修改：鉴于您使用了browserify，更简洁的方法可能是使用babelify转换：

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

我可以在同一个React代码库中同时使用ES6和ES5吗？

1 个答案: