我是新手一起使用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)
我一定是做错了,但我不确定它是什么。有什么想法吗?
答案 0 :(得分:8)
从版本6开始的Babel默认情况下不执行任何操作,您必须提供一组要应用于源代码的转换器。
在您的情况下,您需要react
和es2015
变换器预设:
.pipe(babel({
presets: ['react', 'es2015']
}))
进一步详情: