在将简单反应模块转换为es6类后，将React模块转换为类错误

Question

;我有一些吞咽解析错误。

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']); 

一饮而尽，我得到

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

为什么，我怎么能解析ES6代码？

Answer 1

看不到线14上的内容，但我猜想这是你的构造函数之后的逗号。与ES5“类”相反，ES6类不需要（也不允许）方法之间的逗号。只要删除它，它应该工作（或至少通过第14行）

Answer 2

您需要一个转换器将其转换为ES5，然后在gulp任务中进行管道。我使用babel，并有一个gulp-babel npm包

Answer 3

我改变了我的代码，当使用老版本的transpiling工程。 import从'react'反应会引发错误。

// var React = require('react'); 
import React from 'react'; 

class UdpComp extends React.Component { 

    constructor (props){ 
    super(props); 
    this.state = { udpinput: this.props.udpinput }; 
    } 


    render() { 
    return(
     <div className="udpText"> 
      <h2>UDP-INPUT: {this.state.udpinput}</h2> 
     </div> 
    ) // return 
    } // render 



}; // UdpComp 

module.exports = UdpComp; 
// export default UdpComp;