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

2022-01-12 00:00:00 reactjs javascript gulp browserify babeljs

我有以下 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 和 react 预设.

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'));

相关文章