尝试使用gulp运行react应用程序时出错。我正在使用GIT Bash运行gulp，它完成了我的大部分任务，然后锁定了以下错误：
Line 10: Unexpected token < while parsing file: e:\dev\react-flux-star
er-kit\src\components\homePage.js]
此应用程序的文件位于：
完整输出：
$ 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'));
答案 0 :(得分：1)
返回时的括号{}应该是jsx中的圆括号（）。