我可以在同一React代码库中同时使用ES6和ES5吗? [英] Can I use both ES6 and ES5 in the same React codebase?

问题描述

我有以下gulpfile.js:

I have the following 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进行构建.我对如何执行此操作感到有些困惑(或者完全不建议这样做).

As you can see I have two source files that need transforming. ScheduleMain.js is written in es5 and builds fine. I want to write my new application (ConfidenceMain.js) in es6 and possible transform it to es5 for build. I am a bit confused on how to do this (or rather if it is at all recommended).

底线:尽管先前在同一代码库中为其他项目使用过es5代码，但我可以继续使用es6语法编写的新的React项目吗?

Bottom line: Can I move forward with new react projects written in es6 syntax despite having es5 code previously for other projects in the same code base?

推荐答案

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

Yes, you can mix both ES6 and ES5 - ES6 is fully backwards compatible, so essentially you could think of your entire app as ES6, but only use the new syntax and functionality in new code.

您需要在gulp管道中添加一个转译步骤，以通过babel传递代码并将其编译为ES5.像这样:

You would need to add a transpilation step to your gulp pipeline to pass your code through babel and compile it down to ES5. Something like this:

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()传递即可.

Note that the code above wouldn't transpile ScheduleMain.js but you could easily do that if you wanted, to enable the use of ES6 features going forwards - just pipe it through babel() in the same way.

请注意，babel将需要一些配置-文档将引导您完成此操作.您需要 es2015 和

Note that babel will require some configuration - the documentation will guide you through this. You'll want the es2015 and react presets.

编辑:鉴于您使用的是browserify，一种更干净的方法可能是使用 babelify 转换:

Edit: Given your use of browserify, a cleaner approach might be to use the babelify transform instead:

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

这篇关于我可以在同一React代码库中同时使用ES6和ES5吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！