Question

我有这个React应用程序：

var React = require('react');
var ReactDOM = require('react-dom');
var Application = require('./components/Application.react');

ReactDOM.render(<Application />, document.getElementById('react-application'));

当我运行sudo gulp时，我收到此错误：

events.js:141
      throw er; // Unhandled 'error' event
      ^

SyntaxError: /home/react/snapterest/source/app.js: Unexpected token (5:16)
  3 | var Application = require('./components/Application.react');
  4 |
> 5 | ReactDOM.render(<Application />, document.getElementById('react-application'));
    |                 ^
    at Parser.pp.raise (/home/react/snapterest/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/home/react/snapterest/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/home/react/snapterest/node_modules/babylon/lib/parser/expression.js:507:12)
    at Parser.pp.parseExprSubscripts (/home/react/snapterest/node_modules/babylon/lib/parser/expression.js:260:19)
    at Parser.pp.parseMaybeUnary (/home/react/snapterest/node_modules/babylon/lib/parser/expression.js:240:19)
    at Parser.pp.parseExprOps (/home/react/snapterest/node_modules/babylon/lib/parser/expression.js:171:19)
    at Parser.pp.parseMaybeConditional (/home/react/snapterest/node_modules/babylon/lib/parser/expression.js:153:19)
    at Parser.pp.parseMaybeAssign (/home/react/snapterest/node_modules/babylon/lib/parser/expression.js:120:19)
    at Parser.pp.parseExprListItem (/home/react/snapterest/node_modules/babylon/lib/parser/expression.js:966:16)
    at Parser.pp.parseCallExpressionArguments (/home/react/snapterest/node_modules/babylon/lib/parser/expression.js:336:20)

任何人都可以帮助decypher这个错误试图告诉我什么吗？

编辑：我的gulp.js文件的内容是：

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('default', function() {
    return  browserify('./source/app.js')
        .transform(babelify)
        .bundle()
        .pipe(source('snapterest.js'))
        .pipe(gulp.dest('./build'));

});

Answer 1

你需要对jsx进行一些转换。我不知道命令行的方式，但这里有一些东西。

的package.json

＆＃13;

{
  "name": "ReactPatterns.14-BasicStarter",
  "version": "1.0.0",
  "description": "A collection of simple react projects providing reusable components, startup and test examples.",
  "license": "MIT",
  "author": {
    "name": "Janaka Stevens",
    "email": "jmstevens@calitek.com"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/calitek/ReactPatterns.git"
  },
  "scripts": { "start": "node js/server.js" },
  "dependencies": {
    "express": "latest",
    "react": "^0.14",
    "react-dom": "^0.14",
    "serve-favicon": "latest"
  },
  "devDependencies": {
    "babelify": "latest",
    "babel-preset-es2015": "latest",
    "babel-preset-react": "latest",
    "babel-preset-stage-0": "latest",
    "browserify": "latest",
    "gulp": "latest",
    "gulp-concat": "latest",
    "gulp-minify-css": "latest",
    "vinyl-source-stream": "latest"
  }
}

＆＃13;

gulpfile.js

＆＃13;

'use strict';

let gulp = require('gulp');
let concat = require('gulp-concat');
let minifyCSS = require('gulp-minify-css');
let browserify = require('browserify');
let vsource = require("vinyl-source-stream");
let babel = require('babelify');

let source = {
  appjs: './ui-src/app.js',
  js: ['./ui-src/**/*.js'],
  appcss: ['./ui-src/css/*.css'],
  apphtml: ['./ui-src/**/*.html'],
  appimg: ['./ui-src/img/*']
};

gulp.task('appjs', function(){
  browserify({ debug: true })
    .transform(babel, {presets:["es2015", "react", "stage-0"]})
    .require(source.appjs, { entry: true })
    .bundle()
    .pipe(vsource('app.min.js'))
    .pipe(gulp.dest('./ui-dist'));
});

gulp.task('appcss', function () {
  gulp.src(source.appcss)
    .pipe(concat('app.min.css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('./ui-dist'))
});

gulp.task('apphtml', function() {
  gulp.src(source.apphtml)
    .pipe(gulp.dest('./ui-dist'));
  gulp.src(source.appimg, {base: 'ui-src'})
    .pipe(gulp.dest('./ui-dist'));
});

gulp.task('watch', function() {
  gulp.watch(source.appcss, ['appcss']);
  gulp.watch(source.apphtml, ['apphtml']);
  gulp.watch(source.js, ['appjs']);
});

gulp.task('default', ['appjs', 'appcss', 'apphtml', 'watch']);

gulp.task('nw', ['appjs', 'appcss', 'apphtml']);

＆＃13;

在反应应用程序上运行gulp时出现意外的令牌错误

1 个答案: