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