当 React 遇见 Gulp 和 Browserify
2015年8月8日

书接上文。前面在一个 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

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

然后到 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 文件,就能够自动重新编译打包的,后面我们会介绍相关功能,敬请关注!