React - react.render上的未處理錯誤事件（）

Question

當我運行gulp時，我似乎遇到了將JSX文件編譯為JS的問題。

Gulp依賴：

var gulp        = require('gulp');
var browserify  = require('browserify');
var babelify    = require('babelify');
var source      = require('vinyl-source-stream');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var runSequence = require('run-sequence');

我認為babelify會為我編譯我的JSX，我不必擔心。

然后我得到了我的構建文件：

gulp.task('build', function () {
  return browserify({
    entries: 'app.js',
    extensions: ['.jsx'],
    debug: true
  })
  .transform(babelify)
  .bundle()
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('dist'));
});

gulp.task('compress', function() {
  return gulp.src('./dist/bundle.js')
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', function(cb) {
  runSequence('build','compress', cb);
});

我似乎在我的app.js文件中收到錯誤，我添加了我的第一個組件。

感謝先進的幫助。

****更新****

這是我在運行gulp后得到的錯誤：

events.js:85
      throw er; // Unhandled 'error' event
            ^
SyntaxError: /Users/maxlynn/Documents/childcare-army/app.js: Unexpected token (6:4)
  4 | 
  5 | React.render(
> 6 |     <AppRoot />,
    |     ^
  7 |     document.getElementById('app-root')
  8 | );

Answer 1

如果您最近安裝了babelify，則需要將一些其他配置傳遞給轉換調用，因為Babel 6.x不再提供默認預設。

為了能夠轉換JSX，您需要啟用react預設。

npm install babel-preset-react babel-preset-es2015 --save

.transform('babelify', { presets: ['es2015', 'react'] })