使用reactify進行Browserify轉換

我正在嘗試使用gulp構建項目。不幸的是，我遇到了一些麻煩。使用reactify進行Browserify轉換

這是我gulpfile.js是什麼樣子：

'use strict'; 

var watchify = require('watchify'); 
var browserify = require('browserify'); 
var gulp = require('gulp'); 
var source = require('vinyl-source-stream'); 
var buffer = require('vinyl-buffer'); 
var gutil = require('gulp-util'); 
var sourcemaps = require('gulp-sourcemaps'); 
var assign = require('lodash.assign'); 
var reactify = require('reactify'); 

// add custom browserify options here 
var customOpts = { 
    entries: ['./js/app.js'], 
    debug: true 
}; 
var opts = assign({}, watchify.args, customOpts); 
var b = watchify(browserify(opts)); 
b.transform(reactify); 

// add transformations here 
// i.e. b.transform(coffeeify); 

gulp.task('js', bundle); // so you can run `gulp js` to build the file 
b.on('update', bundle); // on any dep update, runs the bundler 
b.on('log', gutil.log); // output build logs to terminal 

function bundle() { 

    return b.bundle() 
    // log errors if they happen 
    .on('error', gutil.log.bind(gutil, 'Browserify Error')) 
    .pipe(source('bundle.js')) 
    // optional, remove if you don't need to buffer file contents 
    .pipe(buffer()) 
    // optional, remove if you dont want sourcemaps 
    .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file 
     // Add transformation tasks to the pipeline here. 
    .pipe(sourcemaps.write('./')) // writes .map file 
    .pipe(gulp.dest('./js/build')); 
}

的問題是，大口的顯示錶明一些第三方庫有地方非法令牌「<」有問題的文件被寫入錯誤在JSX語法中。

然而，我沒有問題，當我運行以下命令：

browserify -g reactify js\app.js > js\build\bundle.js

請，有什麼不對我的gulpfile？

在此先感謝任何人尋求幫助！

編輯：我懷疑，-g選項使其將jsx遞歸轉換爲普通的javascript，我試圖找到在watchify.transform函數中的等效項，但未成功。

來源

2015-05-23 Mayas

由於docs for .transform說：

如果opts.global是真實的，變換將在所有文件進行操作，儘管他們是否在node_modules /目錄中上升了一個層次

所以要複製-g reactify，你會做

b.transform(reactify, {global: true});

但是請記住，我會考慮的是，你需要-g是您所指的任何依賴關係node_module中的一個錯誤。通常，模塊應該在其自己的package.json文件中包含browserify配置參數，以便您不必全局配置它。由於這些文件的下一部分說：

使用全局變換謹慎，謹慎考慮，因爲大多數時間一個普通的變換就足夠了。

來源

2015-05-23 18:26:50 loganfsmyth

工作完美，非常感謝！是的，我針對這個模塊，我會向維護者提出這個問題。 – Mayas

更好地使用Babel它也支持JSX。

https://babeljs.io/docs/usage/jsx/

來源

2015-05-24 21:31:29

從來沒有聽說過，似乎很酷，但我不明白爲什麼它會更好用。任何特定的interresting功能？ – Mayas

是的。雖然它可以像React-Tools一樣傳輸JSX，但它也可以轉換ES6，因此您可以使用箭頭函數，類和其他類。 –

Browserify似乎也包括一個ES6轉發器https://www.npmjs.com/package/browserify-es6-transpiler 但是，謝謝你的建議;） – Mayas

使用reactify進行Browserify轉換

回答

相關問題