一、gulp
1 var gulp = require(‘gulp‘); 2 var react = require(‘gulp-react‘); 3 4 gulp.task(‘jsx‘, function() { 5 gulp.src(‘./app.jsx‘) 6 .pipe(react()) 7 .pipe(gulp.dest(‘./‘)); 8 }); 9 10 gulp.task(‘default‘, [‘jsx‘]);
二、Browserify
1 var gulp = require(‘gulp‘); 2 var browserify = require(‘browserify‘); 3 var source = require(‘vinyl-source-stream‘); 4 var reactify = require(‘reactify‘); 5 6 gulp.task(‘jsx‘, function() { 7 browserify({ 8 entries: [‘./app.jsx‘], 9 transform: [reactify] 10 }) 11 .bundle() 12 .pipe(source(‘app.js‘)) 13 .pipe(gulp.dest(‘./‘)); 14 }); 15 16 gulp.task(‘default‘, [‘jsx‘]);
三、webpack
var webpack = require(‘webpack‘)
module.exports = {
entry: {
app: ‘./app.jsx‘,
app2: ‘./app2.jsx‘
},
output: {
path: ‘./‘,
filename: ‘[name].js‘,
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("common.js")
],
module: {
loaders: [
{
test: /\.jsx$/,
loader: ‘jsx-loader‘,
}
]
}
}
React gulp、Browserify、Webpack实例
原文：http://www.cnblogs.com/shamgod/p/5071421.html