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

Question

我尝试使用`gulpfiles.js -- 来自New ES6 project with Babel, Browserify & Gulp

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. */
    });
}

但是，当我运行 gulp build 时，它给了我以下错误：第 11 行指向 <div> HELLO, HAOYU </div>。所以报错应该是babel相关的。

{ [SyntaxError: /Users/haoyuchen/Developer/xblock_development/xblockchat/xblockchat/static/js/xblockchat.js: Unexpected token (12:6) while parsing file: /Users/haoyuchen/Developer/xblock_development/xblockchat/xblockchat/static/js/xblockchat.js]
  pos: 223,
  loc: { line: 12, column: 6 },
  _babel: true,
  codeFrame: '\u001b[0m  10 |   render\u001b[1m:\u001b[22m \u001b[36mfunction\u001b[39m\u001b[34m\u001b[1m(\u001b[22m\u001b[39m\u001b[34m\u001b[1m)\u001b[22m\u001b[39m \u001b[32m{\u001b[39m\n  11 |     \u001b[36mreturn\u001b[39m \u001b[34m\u001b[1m(\u001b[22m\u001b[39m\n> 12 |       \u001b[1m<\u001b[22mdiv\u001b[1m>\u001b[22m HELLO\u001b[1m,\u001b[22m HAOYU \u001b[1m<\u001b[22m\u001b[1m/\u001b[22mdiv\u001b[1m>\u001b[22m\n     |       ^\n  13 |     \u001b[34m\u001b[1m)\u001b[22m\u001b[39m\u001b[1m;\u001b[22m\n  14 |   \u001b[32m}\u001b[39m\n  15 | \u001b[32m}\u001b[39m\u001b[34m\u001b[1m)\u001b[22m\u001b[39m\u001b[1m;\u001b[22m\u001b[0m',
  filename: '/Users/haoyuchen/Developer/xblock_development/xblockchat/xblockchat/static/js/xblockchat.js',
  stream: 
   { _readableState: 
      { objectMode: true,
        highWaterMark: 16,
        buffer: [],
        length: 0,
        pipes: [Object],
        pipesCount: 1,
        flowing: true,
        ended: false,
        endEmitted: false,
        reading: true,
        sync: false,
        needReadable: true,
        emittedReadable: false,
        readableListening: false,
        defaultEncoding: 'utf8',
        ranOut: false,
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null,
        resumeScheduled: false },
     readable: true,
     domain: null,
     _events: 
      { end: [Object],
        error: [Object],
        data: [Function: ondata],
        _mutate: [Object] },
     _maxListeners: undefined,
     _writableState: 
      { objectMode: true,
        highWaterMark: 16,
        needDrain: false,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false },
     writable: true,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }

这是我第一次使用 babel，谁能帮我找出问题所在？

谢谢！！

Answer 1

我的 gulpfile 中有一个非常相似的任务，主要区别在于 transform 作为选项传递给 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/'));