Синтаксис Ошибка при использовании Gulp для компиляции React in ES6

Question

Когда я пытаюсь скомпилировать следующий код с помощью React, я получаю приведенную ниже ошибку. Я не вижу проблемы в такой простой программе, и код примера правильно компилируется, когда я клонирую git repo.

main.js:

import React from 'react'; 
import HelloWorld from './components/helloworld'; 
//import HelloWorld from './hello-world-es5'; 

React.render(
    <HelloWorld phrase="ES6"/>, 
    document.body 
); 

HelloWorld:

import React from 'react'; 


class HelloWorld extends React.Component { 
    render() { 
     return <h1>Hello from {this.props.phrase}!</h1>; 
    } 
} 

export default HelloWorld; 

ошибка:

SyntaxError: /Users/**/**/**/**/js/main.js: Unexpected token (7:4) 
    5 | 
    6 | ReactDOM.render(
> 7 |  <HelloWorld phrase="ES6"/>, 
    | ^
    8 |  document.body 
    9 |); 
    at Parser.pp.raise 
Process finished with exit code 1 

Answer 1

Я столкнулся с этой проблемой, используя последние версии babelify, browserify и реагировать , Вам нужно указать конфигурацию пресетов для последних версий babelify. Глоток задача ES6 может выглядеть примерно так:

'use strict'; 

import browserify from 'browserify'; 

import babelify from 'babelify'; 
import reactPreset from 'babel-preset-react'; 
import es2015Preset from 'babel-preset-es2015'; 

import source from 'vinyl-source-stream'; 
import buffer from 'vinyl-buffer'; 

import gulp from 'gulp'; 
import gutil from 'gulp-util'; 
import uglify from 'gulp-uglify'; 
import sourcemaps from 'gulp-sourcemaps'; 

import config from '../config'; //externalized json config file 

gulp.task('compile', function() { 
    var b = browserify({ 
     entries: config.entries, 
     debug: true, 
     transform: [babelify.configure({'presets': [reactPreset, es2015Preset]})] 
    }); 

    return b.bundle() 
     .pipe(source(config.source)) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({loadMaps: true})) 
     .pipe(uglify()) 
     .on('error', gutil.log) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest(config.dest)); 
}); 

Обратите внимание, что browserify в настоящее время передается объект конфигурации, который содержит преобразование свойства для содержащей babelify преобразования, который также выполнен с объектом. Объект конфигурации babelify содержит пресеты. Вы также должны установить пресеты, которые вы хотите использовать. Вы можете узнать больше об этом на https://github.com/babel/babelify#options.

Еще одна вещь, которую я заметил, это то, что вы не упомянули свою версию Reactjs. Самое последнее - 0.14.2, что привело к некоторым значительным изменениям более 0,13.3. Используя последние, вам также потребуется реагировать и использовать это как точку монтирования вашего компонента в DOM.