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

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

底线：尽管之前在同一代码库中的其他项目有 es5 代码，但我可以继续使用 es6 语法编写的新 React 项目吗？

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 will guide you through this. You'll want the es2015 and 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 吗？

Can I use both ES6 and ES5 in the same React codebase?

javascript

browserify

reactjs

gulp

babeljs