我有一個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文件，但不能工作

回答

相關問題