Question

当我执行＆＃34; gulp＆＃34;时，我试图使用react创建一个简单的联系人列表。命令一切都很好，但是当我去使用chrome时它并没有显示任何东西。 Chrome控制台说：

＆＃34;未捕获的SyntaxError：意外的令牌＆lt;＆＃34;在我的main.js：10档

但我认为这很好。

这是我的main.js文件：

var App = require('./components/App');
var React = require('react');
var ReactDOM = require('react-dom');
var AppAPI = require('./utils/appAPI.js');


AppAPI.getContacts();

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

这是我的gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify'); // Converts jsx to js
var source = require('vinyl-source-stream'); // Converts string to a stream

gulp.task('browserify', function(){
    browserify('./src/js/main.js')
        .transform('reactify')
        .bundle()
        .pipe(source('main.js'))
        .pipe(gulp.dest('dist/js'));
});

gulp.task('copy', function(){
    gulp.src('src/index.html')
        .pipe(gulp.dest('dist'));
    gulp.src('src/css/*.*')
        .pipe(gulp.dest('dist/css'));
    gulp.src('src/js/vendors/*.*')
        .pipe(gulp.dest('dist/js'));
});

gulp.task('default', ['browserify', 'copy'], function(){
    return gulp.watch('src/**/*.*', ['browserify', 'copy']);
});

这是我的Index.html文件

<html>
<head>
    <title>ReactApp</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app" class="container"></div>

    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

App.js是

var React = require('react');
var AppActions = require('../actions/AppActions');
var AppStore = require('../stores/AppStore');
var AddForm = require('./AddForm.js');

function getAppState(){
    return {
        contacts: AppStore.getContacts()
    }
}

var App = React.createClass({
    getInitialState: function(){
        return getAppState();
    },

    componentDidMount: function(){
        AppStore.addChangeListener(this._onChange);
    },

    componentUnmount: function(){
        AppStore.removeChangeListener(this._onChange);
    },

    render: function(){
        console.log(this.state.contacts);
        return(
            <div>
                <AddForm />
            </div>
        );
    },

    // Update view state when change is received
    _onChange: function(){
        this.setState(getAppState());
    }
});

module.exports = App;

Answer 1

你的gulp任务需要一些工作：您需要使用gulp.src来获取您的main.js文件。那么，transform是gulp-browserify的一个选项，而不是你想要管道你的流的东西，同样适用于bundle。

gulp.task('scripts', function () {
  return gulp.src('./assets/js/main.js')
    .pipe(browserify({
      transform: [reactify]
    }))
    .pipe(gulp.dest('./static/js'));
});

Answer 2

您遇到与此帖子中的人Syntax Error when using Gulp to compile React in ES6

相同的问题

您可以修改它改变gulp任务的配置

Gulp，Uncaught SyntaxError：意外的令牌＆lt;

2 个答案: