Ошибка анализа Gulp-Babel JSX

Question

Я новичок в использовании gulp и babel вместе. Я создал сборки задачу (упрощенная версия ниже):

var gulp = require('gulp'); 
var babel = require('gulp-babel'); 

gulp.task('build',() => { 
    return gulp.src('src/components/App.jsx') 
    .pipe(babel()) 
    .pipe(gulp.dest('build')) 
}); 

Мой файл src/components/App.jsx выглядит следующим образом:

/** @jsx React.DOM */ 

import React, {Component} from 'react'; 

class App extends Component { 
    render() { 
    return <div>Example</div> 
    } 
} 

export default App; 

Ошибка я получаю:

events.js:141 
     throw er; // Unhandled 'error' event 
    ^
SyntaxError: /Users/user/src/components/app.jsx: Unexpected token (8:6) 
    6 | render:() => { 
    7 |  return (
> 8 |  <div>Test</div> 
    |  ^
    9 | ) 
    10 | } 
    11 | }); 
    at Parser.pp.raise (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13) 
    at Parser.pp.unexpected (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:91:8) 
    at Parser.pp.parseExprAtom (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:514:12) 
    at Parser.pp.parseExprSubscripts (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:267:19) 
    at Parser.pp.parseMaybeUnary (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:247:19) 
    at Parser.pp.parseExprOps (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:178:19) 
    at Parser.pp.parseMaybeConditional (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:160:19) 
    at Parser.pp.parseMaybeAssign (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:123:19) 
    at Parser.pp.parseParenAndDistinguishExpression (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:566:26) 
    at Parser.pp.parseExprAtom (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:471:19) 

Я должен что-то не так, но я не уверен, что это такое. Есть идеи?

Answer 1

Бабель, начинающийся с версии 6, по умолчанию ничего не делает, и вы должны предоставить набор трансформаторов для применения к исходному коду.

В вашем случае, если вы хотите как react и es2015 трансформаторные пресеты:

.pipe(babel({ 
    presets: ['react', 'es2015'] 
})) 

Дальнейшие детали:

• https://babeljs.io/blog/2015/10/29/6.0.0/