我有一个GULP任务文件，用JSX代码使用babelify编译js文件，但不能工作

我有一个反应的项目，我已经安装了babelify，也gulp，当我使用gulp命令时，它完美的工作并生成我的输出文件，但是如果我添加JSX代码到我的app.js文件，给我下面的错误：我好像没有安装我有一个GULP任务文件，用JSX代码使用babelify编译js文件，但不能工作

> events.js:160 
>> throw er; // Unhandled 'error' 
> SyntaxError C:/xxxxx/xxxxx/xxxx/myProject/source/app.js: Unexpected token (4:18)

babelify，但它已经与故宫安装

npm install --save-dev babelify

and gulp with

npm install --global gulp

我app.js文件具有下面的代码：

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var listOfItems = <ul className="list-of-items"> 
<li className="item-1">Item 1</li> 
<li className="item-2">Item 2</li> 
<li className="item-3">Item 3</li> 
</ul>; 
ReactDOM.render(listOfItems, document.getElementById('react-application'));

和我一饮而尽文件是下一个...

var gulp = require('gulp'); 
var browserify = require('browserify'); 
var babelify = require('babelify'); 
var source = require('vinyl-source-stream'); 

gulp.task('default', function(){ 
    return browserify({entries: './source/app.js', debug: true}) 
    .transform(babelify) 
    .bundle() 
    .pipe(source('snapterest.js')) 
    .pipe(gulp.dest('./build/')); 
});

非常感谢你的帮助！

来源

2017-08-24 Emiliano

你可以使你的一饮而尽文件中的以下更改

.transform(babelify, {presets: ["es2015", "react"]})

然后

npm install --save-dev babel-preset-es2015 babel-preset-react

然后运行一饮而尽..它应该工作

来源

2017-08-24 05:20:04

我有一个GULP任务文件，用JSX代码使用babelify编译js文件，但不能工作

回答

相关问题