Question

将简单的反应模块转换为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：解析错误：第14行：意外标识符错误

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

Answer 1

无法看到第14行的内容，但我猜错了你的构造函数之后的逗号。与ES5＆＃34;类和＃34;相反，ES6类不需要（并且不允许）方法之间的逗号。只需删除它，它应该工作（或至少通过第14行）

Answer 2

您需要一个将其转换为ES5的转换器，然后在gulp任务中将其传输。我使用babel并且有一个gulp-babel npm包

Answer 3

我将代码更改为此，当使用旧版本时，转换工作正常。来自'react'的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;

gulp将React模块转换为类错误

3 个答案: