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

Unexpected token error when using Gulp babelify to process ReactJS JS file

本文关键字：意外 令牌 错误 处理 Gulp-babelify ReactJS JS 文件 使用      更新时间：2023-09-26

我尝试使用`gullfiles.js——来自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，有人能帮我找出这里的问题吗？

谢谢！！

我的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/'));
相关文章：