javascript - 执行gulp提示JSX错误
本文介绍了javascript - 执行gulp提示JSX错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
执行gulp, 提示错误:
[15:56:31] Using gulpfile ~/snapterest/gulpfile.js
[15:56:31] Starting 'default'...
events.js:154
throw er; // Unhandled 'error' event
^
SyntaxError: /Users/yonghuming/snapterest/source/app.js: Unexpected token (4:16)
2 | var ReactDOM = require('react-dom');
3 | var Application = require('./components/Application.react');
> 4 | ReactDOM.render(<Application />, document.getElementById('react-application'));
| ^
5 |
6 |
7 |
at Parser.pp.raise (/Users/yonghuming/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:1375:13)
at Parser.pp.unexpected (/Users/yonghuming/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:2813:8)
at Parser.pp.parseExprAtom (/Users/yonghuming/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:747:12)
at Parser.pp.parseExprSubscripts (/Users/yonghuming/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:502:19)
at Parser.pp.parseMaybeUnary (/Users/yonghuming/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:482:19)
at Parser.pp.parseExprOps (/Users/yonghuming/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:413:19)
at Parser.pp.parseMaybeConditional (/Users/yonghuming/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:395:19)
at Parser.pp.parseMaybeAssign (/Users/yonghuming/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:358:19)
at Parser.pp.parseExprListItem (/Users/yonghuming/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:1204:16)
at Parser.pp.parseCallExpressionArguments (/Users/yonghuming/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:578:20)
gulpfile.js文件内容
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('default', function(){
// console.log('I am about to learn the essentials of React.js');
return browserify('./source/app.js')
.transform(babelify)
.bundle()
.pipe(source('snapterest.js'))
.pipe(gulp.dest('./build/'));
});
解决方案
如果是 Babel 6 的话, 需要配置 preset
$ npm install --save-dev babel-preset-es2015 babel-preset-react
browserify('./source/app.js')
.transform('babelify', {presets: ['es2015', 'react']})
.bundle()
.pipe(source('snapterest.js'))
.pipe(gulp.dest('./build/'));
或者配置.babelrc
{
"presets": ["es2015", "react"]
}
这篇关于javascript - 执行gulp提示JSX错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文