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開始的Babel默認情況下不會執行任何操作，您必須提供一組要應用於源代碼的變換器。

你的情況，你想同時react和es2015變壓器預設：

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

進一步瞭解詳細：

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