ReactJS+es6+gulp+browserify开发环境搭建

通过前端自动化工具gulp，同时要实现commonjs规范，来搭建reactJS+es6的开发环境

1.npm init初始化package.json文件

2.我们需要将jsx转化为js语法，并且同时将es6/es7转化为es2015，这里我们来介绍一下browserify转化工具。

（1）什么是browserify

browserify可以实现类似模块管理器（比如npm,bower等），但是browerify并不是一个严格的包管理器，

只是让服务器端的CommonJS格式的模块可以运行在浏览器端，我们知道nodejs（运行在后端），是支持

CommonJS规范的，如果要在前端实现CommonJs规范，那么browserify是一个很好的工具，相当于间接

给浏览器实现了Npm规范。

（2）我们主要来了解browerify的两个配置项

transform：

官方的解释：Specifies a pipeline of functions (or module names) through which the browserified bundle will be run.

意思就是一个特殊的管道函数（或者是模块名），通过这些函数可以依次引入，来实现转化源程序。

transfrom有一系列的模块。常见的有（a）babelify用于转化es6——>es5。（b）reactfy——>用于转化

JSX语法到js语法。

extensions:

官方的解释：Array of extensions that you want to skip in require() calls in addition to .js and .json.

这里的意识是希望在以.js或者.json后缀的文件之外，其他格式的文件也可以使用require()语法。比如.coffee

文件。

举例：我们举例来说明如何将coffeeJS通过browserify转化为JS

var bowserify=require('gulp-browserify');
.....

gulp.src('src/coffee/app.coffee', { read: false })
    .pipe(browserify({
      transform: ['coffeeify'],
      extensions: ['.coffee']
    }))

3.如何实现es6+react的开发环境

首先我们要安装所需要的包依赖.package.json文件。

通过npm install -s或者npm install -save-dev安装，主要的包为reactfy,babelify,browserify等，

然后写gulp的配置文件，主要部分为：

    gulp.src('js/app.jsx')
        .pipe(browserify({
            transform: ['babelify', 'reactify']
        }))
        .pipe(rename('app.js'))
        .pipe(gulp.dest('build'));

附上github的demo地址：https://github.com/alexbeletsky/react-gulp-es6