javascript - gulp 将 React 模块转换为类错误

Question

将一个简单的 React 模块转换为 es6 类之后；我遇到了一些 gulp 解析错误。

    var React = require('react');
    // import React from 'react';
    class UdpComp extends React.Component {

      constructor (props){
         super(props);
         this.state = { udpinput: props.udpinput };
      },
      render: function() {
        return(
            <div className="udpText">
                <h2>UDP-INPUT: {this.state.udpinput}</h2>
           </div>
        ) // return
      } // render
    })// UdpComp

    export default UdpComp;

好的，我的 gulpfile.babel.js 看起来像这样:

var gulp = require('gulp'),
    browserify = require('gulp-browserify'),
    concatCss = require('gulp-concat-css'),
    sass = require('gulp-sass'),
    run = require('gulp-run');

var src = './process',
    app = './app';

var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'expanded'
}; // https://www.sitepoint.com/simple-gulpy-workflow-sass/


gulp.task('js', function() {
  return gulp.src( src + '/js/apprender.js' )
     .pipe(browserify({
      transform: 'reactify',
      extensions: 'browserify-css',
      debug: true
    }))
    .on('error', function (err) {
      console.error('Error!', err.message);
    })
    .pipe(gulp.dest(app + '/js'));
});

gulp.task('html', function() {
  gulp.src( src + '/**/*.html');
});

gulp.task('css', function() {
  gulp.src( src + '/css/*.css')
  .pipe(sass(sassOptions).on('error', sass.logError))
  .pipe(concatCss('app.css'))
  .pipe(gulp.dest(app + '/css'));
});

gulp.task('fonts', function() {
    gulp.src('node_modules/bootstrap/dist/fonts/**/*')
    .pipe(gulp.dest(app + '/fonts'));
});

gulp.task('watch', ['serve'], function() {
  gulp.watch( src + '/js/**/*', ['js']);
  gulp.watch( src + '/css/**/*.css', ['css']);
  gulp.watch([ app + '/**/*.html'], ['html']);
});

gulp.task('serve', ['html', 'js', 'css'], function() {
  run('electron app/main.js').exec();
});

gulp.task('default', ['watch', 'fonts', 'serve']);

当我调用 gulp 时

\process\js\UdpCompReact.js: Parse Error: Line 14: Unexpected identifier error

为什么，我该如何解析 es6 代码？

Answer 1

看不到第 14 行的内容，但我猜它是构造函数后面的逗号。与 ES5“类”相反，ES6 类不需要(也不允许)方法之间使用逗号。只需删除它，它就可以工作(或者至少超过第 14 行)