Javascript 使用Gulp babelify处理ReactJS文件时出现意外令牌错误

我尝试使用“gulpfiles.js”——来自

app.js

设置为“/static/js/xblockchat.js”，如下所示：

/** @jsx React.DOM */

var React = require('react');
var ReactDOM = require('react-dom');
var config = require('./config');
// require('./chatUI');


var test = React.createClass({
  render: function() {
    return (
      <div> HELLO, HAOYU </div>
    );
  }
});


function ChatXBlock(runtime, element) {
    $(function ($) {
        console.log(element);
        ReactDOM.render(
            <test />,
            document.getElementById('content')
        );
        /* Here's where you'd do things on page load. */
    });
}

这是我第一次使用巴别塔，有人能帮我找出哪里不对劲吗

---

谢谢

我的gulpfile中有一个非常类似的任务，关键的区别是

转换

作为一个选项传递给

browserify

：

var bundler = browserify({ 
    entries : './src/index.js',
    debug: true,
    transform : [ babel ]
});
return bundler.bundle()
  .pipe(source('index.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(uglify())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./build/'));

---

在transform中添加reactify而不是使用babel解决了我的问题！暂时

var bundler = browserify({ 
    entries : './src/index.js',
    debug: true,
    transform : [ babel ]
});
return bundler.bundle()
  .pipe(source('index.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(uglify())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./build/'));