問題描述

我有以下 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 代碼，但我可以繼續(xù)使用 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，但如果您愿意，您可以輕松地做到這一點，以便繼續(xù)使用 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'));

這篇關于我可以在同一個 React 代碼庫中同時使用 ES6 和 ES5 嗎?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！