利用gulp构件React项目

对于React项目的构件可以采用Gulp工具。

如下代码所示，从js的入口文件./source/app.js开始，通过transform转换（JSX转换为js）、打包等步骤，最终输出target.js文件，并将该文件存放在./build/目录中。

 

 import gulp from 'gulp';
 import browserify from 'browserify';
 import source from 'vinyl-source-stream';


gulp.task('default',function(){
     return browserify('./source/app.js')
             .transform("babelify",{presets:["es2015","react"]})
            .bundle()
             .pipe(source('target.js'))
             .pipe(gulp.dest('./build/'));
    
});

为了实现构件过程，需要依赖gulp,browserify,vinyl-source-stream,babelify,babel-preset-es2015 和babel-preset-react等包。

为此，需要安装

$ npm install --g gulp

$ npm install --save-dev browserify

$ npm install --save-dev vinyl-source-stream

$ npm install --save-dev babelify

$ npm install --save-dev babel-preset-es2015      babel-preset-react

关于转换过程中需要用的babelify，可以参考相应babelify的文档。