React gulp、Browserify、Webpack实例

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shamgod/p/5071421.html

文章标签：

#webpack #javascript #ViewUI

本文介绍了三种不同的JSX编译方案：使用gulp配合react插件、利用Browserify结合reactify插件及采用Webpack配置jsx-loader的方式。这些方案分别适用于不同场景下的React应用开发。

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