当 React 遇见 Gulp 和 Browserify

书接上文。前面在一个 html 文件中，定义了两个元器件，或者叫组件吧，并进行了嵌套使用。这一集来一起使用 Browserify 。我们会通过 Gulp 自动运行任务的方式来使用 Browserify 。

分割文件成为独立的 JSX

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

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

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

var Parent = React.createClass({
  render: function(){
    return (
      <div>
        <div> Hello World </div>
        <Child/>
      </div>
    )
  }
});

module.exports = Parent;

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

var Child = React.createClass({
  render: function(){
    return (
      <div>Child</div>
    )
  }
});

module.exports = Child;

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

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

分割完了，最终用的时候还是要组合在一起的，这个组合过程就要用 Browserify 。

Browserify 的功能

人们说，有了 Browserify 就不用 RequireJs 了。浏览器本身没有 require 功能，Browerify 就是让浏览器也拥有这种功能。同时，对于 react 来说，如果当前文件下我需要使用一个组件，就可以直接 require('./Parent.jsx') 了，这样如果 Parent.jsx 文件内容又有 `require(‘./Child.jsx’)，那么这种层级依赖关系，Browserify 也一样可以递归的进行处理。其实在使用 react 之前，我自己组织 html 就是按照元器件的思路去弄，也就是有下面的结构。

可以看到上面这种思路也是层级嵌套的。有了 Browserify 的这种递归式的 require 功能，实现上面的结构就成很简单了。（原来我用 Jekyll 的 include 或者是 Rails 的 render paritial 的功能来实现类似的效果 ) 。

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

<script src='js/bundle.js'></script>

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

安装 Browserify

这篇文档使用的 Browserify ，是很好的参考。另外，下面的操作很大程度参考了 laracasts 的 react 课程。

首先要安装 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 打开就可以看到运行效果了。但是为了使用一个很好玩的工具叫做 ”React 开发者工具“，我们需要先把服务器跑起来，具体步骤如下。

React Developer Tools

可以到 Chrome store 里面搜索安装”React 开发者工具”，装好之后如果直接浏览器打开一个用 react 写的页面，默认是是看不到 react 开发者工具对应的选项卡的。

需要做的是启动 server 。在我的 ~/.zshrc 文件中添加

alias server='open http://localhost:8000 && python -m SimpleHTTPServer'

这样，到 react-demo 文件夹里面执行

server

就可以在浏览器中看到页面了，打开 chrome 开发者工具，也可以看到 react 选项卡了。

通过 react 开发者工具，可以看到父组件包含子组件的嵌套结构，非常有意思的。

结语

这一集里面安装的 Browerify 来进行 jsx 文件的打包，但是实际开发中其实我们希望是每次修改 js 文件，就能够自动重新编译打包的，后面我们会介绍相关功能，敬请关注！