当 React 遇见 Gulp 和 Browserify

目标：通过 Gulp 自动运行任务的方式来使用 Browserify 。

源代码

分割文件成为独立的 JSX

前面把两个组件都写到一块了，现在来分割成独立的文件，具体分割过程可以参考视频中的演示。

其中 js/components/Parent.jsx 内容如下

var Child = require('./Child.jsx');

var Parent = React.createClass({
  render: function(){
    return (
      

        
 Hello World 
        
      
    )
  }
});

module.exports = Parent;

Parent 的子元器件 Child 写到 js/components/Child.jsx ，内容如下:

var Child = React.createClass({
  render: function(){
    return (
      
 The Child 
    )
  }
});

module.exports = Child; 

要真正让元器件显示在页面上需要执行 React.render ，这个是写在 js/app.js 中的，内容如下：

var Parent = require('./components/Parent.jsx');
React.render(, document.getElementById('app'));

使用 Browerify 之后，html 文件中只需要有一条 script ，如下：

所有依赖的 js 内容未来都会被编译到 bundle.js 文件中。

安装 Browserify

首先要安装 Gulp 。这里我假设大家的系统上都安装好了 nodejs 并且也全局安装了 gulp ，也就是敲

gulp -v

是可以看到输出的。在这个基础上，进入项目目录还需要来局部安装 gulp ，browserify 以及相关的辅助工具：

npm install --save-dev gulp browserify vinyl-source-stream babelify

说一下上面四个包的各自作用：

• gulp 是任务运行环境，用来进行任务调度
• browserify 用来 require js 的模块
• vinyl-source-stream 把 browserify 输出的数据进行准换，使之流符合 gulp 的标准
• babelify 本来的主要作用是进行 ES6 的编译，但是我们这里是使用它的 JSX 编译功能

然后到 gulpfile.js 中，填写如下内容：

var gulp = require("gulp");
var browserify = require("browserify");
var babelify = require("babelify");
var source = require("vinyl-source-stream");

gulp.task('browserify', function(){
  return browserify('./js/app.js')
         .transform(babelify)
         .bundle()
         .pipe(source('bundle.js'))
         .pipe(gulp.dest('js'));
});

来解释一下上面的脚本流程。首先就是把入口文件 app.js 交给 browserify 进行处理，对于 jsx 的编译，我们这里使用 babelify 来实现，Gulp 官方的方案 使用的是 reactify ，当然也是可以的。下一步，运行 bundle()
来把所有依赖都打包成 bundle.js ，但是注意，browserify 不是一个专门为 gulp 写的包，所有它输出的数据流并不能直接 pipe 给 gulp 使用，所以，需要用到 source()
接口，也就是 vinyl-source-stream 这个工具来处理一下，然后 pipe 给 gulp ，gulp.dest 会把输出的 bundle.js 文件保存到 js 文件夹中。
任务写好了，在命令行执行：

gulp browserify

这样就生成了 js/bundle.js 文件了。由于这个文件的标签已经添加到 index.html 中了，所以直接用 chrome 打开就可以看到运行效果了。

Paste_Image.png

用chrome浏览器安装react开发插件，就能看到react标签了，非常方便

Paste_Image.png