React gulp、Browserify、Webpack執行個體

一、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

1 var webpack = require('webpack')
 2 
 3 module.exports = {
 4     entry: {
 5         app: './app.jsx',
 6         app2: './app2.jsx'
 7     },
 8     output: {
 9         path: './',
10         filename: '[name].js',
11     },
12     plugins: [
13         new webpack.optimize.CommonsChunkPlugin("common.js")
14     ],
15     module: {
16         loaders: [
17             {
18                 test: /\.jsx$/,
19                 loader: 'jsx-loader',
20             }
21         ]
22     }
23 }      

　　

You can do anything you set your mind to, man!