我有一個GULP任務文件，用JSX代碼使用babelify編譯js文件，但不能工作

Question

我有一個反應的項目，我已經安裝了babelify，也gulp，當我使用gulp命令時，它完美的工作並生成我的輸出文件，但是如果我添加JSX代碼到我的app.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/')); 
}); 

非常感謝你的幫助！

Answer 1

你可以使你的一飲而盡文件中的以下更改

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

然後

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

然後運行一飲而盡..它應該工作