运行Gulp给投掷者; //未处理的错误＆＃39;事件

Question

  

main.js

var React = require('react'); 
 var App = require('./components/app.js');
 React.render(
<App />,
    document.getElementById('container')
);

  

app.js

var React = require('react'); 
  var App = React.createClass({
render: function(){
    return (
        <p>Hello</p>
    );
}
});
module.exports = App;

gulpfile.js有什么问题吗？因为如果我在main.js文件中编写反应组件代码，它工作正常。

Answer 1

您忘记将JSX转换为Javascript。

这是我的gulp构建任务 - 它使用browserify并重新组合来转换和捆绑我的组件，然后缩小它们，并通过将它们放入我的应用程序读取的目录中来完成。

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');

gulp.task('build', function () {
    browserify({
        entries : ['./js_modules/main.js'],
        transform : [reactify],
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(streamify(uglify('bundle.js')))
    .pipe(gulp.dest('src/main/webapp/js/bundle.js'));
});