React gulp、Browserify、Webpack实例

一、gulp

var gulp = require('gulp');
var react = require('gulp-react');

gulp.task('jsx', function() {
    gulp.src('./app.jsx')
        .pipe(react())
        .pipe(gulp.dest('./'));
});

gulp.task('default', ['jsx']);

二、Browserify

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var reactify = require('reactify');

gulp.task('jsx', function() {
    browserify({
        entries: ['./app.jsx'],
        transform: [reactify]
    })
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('./'));
});

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',
            }
        ]
    }
}