gulp 反应错误

Question

尝试使用 gulp 运行反应应用程序时出现错误。我正在使用 GIT Bash 到运行 gulp，它完成了我的大部分任务，然后锁定并出现以下错误：

Line 10: Unexpected token < while parsing file: e:\dev\react-flux-star
er-kit\src\components\homePage.js]

此应用程序的文件可在以下位置找到：

https://drive.google.com/folderview?id=0B5BbTFRcAIYTfnppZldqUjBzRlFhaWRWOHFKMmc4OEktZFcwRUhYd0E0S0lac3duVUxYYjA&usp=sharing

完整输出：

$ gulp
[14:58:00] Using gulpfile e:\dev\react-flux-starter-kit\gulpfile.js
[14:58:00] Starting 'html'...
[14:58:00] Finished 'html' after 4.99 ms
[14:58:00] Starting 'js'...
[14:58:00] Finished 'js' after 14 ms
[14:58:00] Starting 'css'...
[14:58:00] Finished 'css' after 3.87 ms
[14:58:00] Starting 'lint'...
[14:58:00] Starting 'connect'...
[14:58:00] Finished 'connect' after 12 ms
[14:58:00] Starting 'open'...
[14:58:00] Finished 'open' after 1.81 ms
[14:58:00] Starting 'watch'...
[14:58:00] Finished 'watch' after 8.59 ms
[14:58:00] Server started http://localhost:9005
[14:58:00] LiveReload started on port 35729
[14:58:00]
e:\dev\react-flux-starter-kit\src\components\homePage.js
  10:4  error  Unexpected token <

✖ 1 problem (1 error, 0 warnings)

[14:58:00] Finished 'lint' after 147 ms
[14:58:00] Starting 'default'...
[14:58:00] Finished 'default' after 5.13 μs
{ [ReactifyError: e:\dev\react-flux-starter-kit\src\components\homePage.js: Par
e Error: Line 10: Unexpected token < while parsing file: e:\dev\react-flux-star
er-kit\src\components\homePage.js]
  index: 144,
  lineNumber: 10,
  column: 4,
  description: 'Unexpected token <',
  name: 'ReactifyError',
  fileName: 'e:\dev\react-flux-starter-kit\src\components\homePage.js',
  filename: 'e:\dev\react-flux-starter-kit\src\components\homePage.js',
  stream:
   { _readableState:
      { 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,
        objectMode: true,
        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: 10,
     _writableState:
      { highWaterMark: 16,
        objectMode: true,
        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,
        buffer: [],
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false },
     writable: true,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }

homepage.js

/** @jsx React.DOM */

"use strict";

var React = require('react');

var Home = React.createClass({
    render: function(){
        return {
            <div className="jumbotron">
                <h1>Pluralsight Administration</h1>
                <p>React, React Router, and Flux for ultra-responsive web apps.</p>
            </div>
        };
    }
});

module.exports = Home;

gulpfile.js

"use strict";

var gulp = require('gulp');
var connect = require('gulp-connect'); //Runs a local dev server
var open = require('gulp-open'); //Open a URL in a web browser
var browserify = require('browserify'); // Bundles JS
var reactify = require('reactify');  // Transforms React JSX to JS
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp
var concat = require('gulp-concat'); //Concatenates files
var lint = require('gulp-eslint'); //Lint JS files, including JSX

var config = {
    port: 9005,
    devBaseUrl: 'http://localhost',
    paths: {
        html: './src/*.html',
        js: './src/**/*.js',
        css: [
            'node_modules/bootstrap/dist/css/bootstrap.min.css',
            'node_modules/bootstrap/dist/css/bootstrap-theme.min.css'
        ],
        dist: './dist',
        mainJs: './src/main.js'
    }
}

//Start a local development server
gulp.task('connect', function() {
    connect.server({
        root: ['dist'],
        port: config.port,
        base: config.devBaseUrl,
        livereload: true
    });
});

gulp.task('open', ['connect'], function() {
    gulp.src('dist/index.html')
        .pipe(open('', { url: config.devBaseUrl + ':' + config.port + '/'}));
});

gulp.task('html', function() {
    gulp.src(config.paths.html)
        .pipe(gulp.dest(config.paths.dist))
        .pipe(connect.reload());
});

gulp.task('js', function() {
    browserify(config.paths.mainJs)
        .transform(reactify)
        .bundle()
        .on('error', console.error.bind(console))
        .pipe(source('bundle.js'))
        .pipe(gulp.dest(config.paths.dist + '/scripts'))
        .pipe(connect.reload());
});

gulp.task('css', function() {
    gulp.src(config.paths.css)
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'));
});

gulp.task('lint', function() {
    return gulp.src(config.paths.js)
        .pipe(lint({config: 'eslint.config.json'}))
        .pipe(lint.format());
});

gulp.task('watch', function() {
    gulp.watch(config.paths.html, ['html']);
    gulp.watch(config.paths.js, ['js', 'lint']);
});

gulp.task('default', ['html', 'js', 'css', 'lint', 'open', 'watch']);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pluralsight Administration</title>
    <link rel="stylesheet" href="css/bundle.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="scripts/bundle.js"></script>
  </body>
</html>

main.js

$ = jQuery = require('jquery');
var React = require('react');
var Home = require('./components/homePage');

React.render(<Home />, document.getElementById('app'));

Answer 1

return 周围的方括号 { } 在您的 jsx 中应该是圆括号 ( )。

gulp 反应错误

gulp error with react

git-bash

reactjs

gulp