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 文件中遇到了错误。

感谢高级帮助。

**** 更新 ****

这是我曾经得到的错误运行ning 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'] })

React - react.render() 上未处理的错误事件

React - Unhandled Error Event on react.render()

javascript

reactjs

gulp

react-jsx