Question

我有自己的反应组件，现在当我通过gulp启动服务器时，它会抛出此错误......

events.js:160
      throw er; // Unhandled 'error' event
      ^
SyntaxError: /Users/Maude/Projects/NoteTaker/src/scripts/components/notes.jsx: Unexpected token (12:6)
  10 | 
  11 |     return (
> 12 |       <div>
     |       ^
  13 |         <p>hi</p>
  14 |       </div>
  15 |     );

这就是组件的样子：

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';


class Notes extends React.Component {

  render() {
    return (
      <div>
        <p>hi hellooo</p>
      </div>
    );
  }
}

ReactDOM.render(<Notes />, document.getElementById('notes'))

我假设它与我的gulpfile.js中有关于babel的事情有关，我只是不确定它是什么。其他一切都很好......但渲染组件变得很奇怪......

const gulp = require('gulp');
const sass = require('gulp-sass');
const path = require('path');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const connect = require('gulp-connect');


// Styles
gulp.task('sass', () => {
  return gulp.src('src/styles/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('assets/css'))
    .pipe(connect.reload());
});


gulp.task('babel', () => {
  return gulp.src('src/scripts/components/**/*.jsx')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('assets/js/'))
    .pipe(connect.reload());
});


gulp.task('webserver', () => {
  connect.server({
    livereload: true
  });
});


gulp.task('watch', () => {
  gulp.watch('src/styles/*.scss', ['sass']);
  gulp.watch('src/scripts/components/*.jsx', ['babel']);
})

gulp.task('default', ['sass', 'babel', 'webserver', 'watch']);

我做错了什么？

Uncaught SyntaxError：带有gulp babel

0 个答案: