2015-12-08 15 views
6

這是我的gulpfile代碼:咕嘟咕嘟Reactify和Babelify沒有轉化在一起

gulp.task('react', function() { 
    browserify('app/src/main.jsx') 
    .transform(reactify) 
    .transform(babelify) 
    .bundle() 
    .pipe(source('app.js')) 
    .pipe(streamify(uglify())) 
    .pipe(gulp.dest('dist/js/')); 
}); 

只有第一個變換語句運行,併爲此拋出一個錯誤,由於缺乏額外轉換(我以書面形式ES6和JSX有反應)。

我完全失去了,會真的很感激幫助。

回答

10

不應再使用Reactify。你不會說你的版本是什麼,但截至Babel 6「preset's」是實現編譯的標準方法。

運行以下

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

您還應該確保Babelify是最新的。然後你的Gulp配置變成

var babelify = require("babelify"); 
gulp.task('react', function() { 
    browserify('app/src/main.jsx') 
    .transform(babelify, {presets: ["es2015", "react"]}) 
    .bundle() 
    .pipe(source('app.js')) 
    .pipe(streamify(uglify())) 
    .pipe(gulp.dest('dist/js/')); 
}); 

查看options page瞭解更多信息。

+0

當你說不應該再使用reactify時,你是在廣泛討論還是在談論這個特定場景? – backdesk

+1

Babel確實可以做到所有事情都做得很好,而且它的設置與吞噬/咕嚕一樣簡單。 OP是*已經使用babel *,所以在使用reactify – Tyrsius

+1

謝謝。在谷歌搜索之後,由於一些堅實的理由,在這裏找到了一個超過個人偏好的理由。 – backdesk