据说，当使用Reactjs的时候，Gulp和Browserify很配哦

在生产环境中若是依靠前端引用JSXTransformer.js文件来实现JSX向JavaScript的转换，那是绝对不靠谱的。因此，使用Reactjs的童鞋就须要使用更有逼格的方式来完成这项任务。做为如今最经常使用的前端构建工具gulp搭配上Browserify来搞定这个问题那真是拉风的不要不要的 ：）

废话很少说，我们来点直接的吧。

源代码

咱们此次的任务就是让这段满目疮痍的源代码变得更优化，千里之行，这是开始。若是有童鞋看不懂这段代码是用来作神马的，那么我只能说，“妈妈叫你回家看基础了。”回家之路（看不懂代码的，请猛戳）。

<div id="app"></div>
<script type="text/jsx">
    var HelloWorld = React.createClass({ 
        render: function() { 
            return (
                <div> Hello World </div> 
            );
        }
    }); 
    
    React.render(<HelloWorld />, document.getElementById('app'));
</script>
<script type="text/jsx">
    var Child = React.createClass({ 
        render: function() { 
            return (
                <div> The Child </div> 
            );
        }
    }); 

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

    React.render(<Parent />, document.getElementById('app'));
</script>

优化

前面把两个组件都写到一块了，如今来分割成独立的文件。其中一个命名为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> The Child </div>
    )
  }
});

module.exports = Child;

写到这里，咱们已经将两个组件作了初步的拆分，若是有童鞋对module.exports是神马仍是只知其一;不知其二或者根本不懂这是要搞什么飞机，那么请去百度自行谷歌commonjs，相信度娘会很妩媚的帮你解惑。

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

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

作到这里，咱们还顺带了作了一件颇有意义的事情，就是对文件文件目录作了优化，组件放置在/components文件夹中，启动放置在根目录/js下，清晰明了。

使用Browerify以后，html文件中只须要引入一个自定义script文件就行了 ，以下：

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

全部依赖的js内容将来都会被编译到bundle.js文件中。

安装 Browserify

工欲善其事，必先利其器。若是尚未安装gulp的童鞋能够参考我曾经写的《这年头，不用点道具（gulp），你都很差意思说你是作前端的》来安装一下（名字略长略长，但有没有很贴心，服务就是要作全套嘛）。

若是你在命令行敲击以下命令

gulp -v

输出结果大概以下面这个这样子的话，那就说明你已经成功安装了gulp。

CLI version 3.9.0
Local version 3.9.0

在这个基础上，进入项目目录还须要来局部安装 gulp ，browserify 以及相关的辅助工具：

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

使用Mac的童鞋不要忘记加sudo哟。

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

• gulp 是任务运行环境，用来进行任务调度

• browserify 用来 require js 的模块

• vinyl-source-stream 把 browserify 输出的数据进行准换，使之流符合 gulp 的标准

• reactify 使用它来实现 JSX 编译功能

而后到 gulpfile.js 中，填写以下内容：

var gulp = require("gulp"),
    browserify = require('browserify'),
    reactify = require('reactify'),
    source = require('vinyl-source-stream');

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

来解释一下上面的脚本流程。首先就是把入口文件 app.js 交给 browserify 进行处理，对于 jsx 的编译，官方推荐使用的就是reactify。下一步，运行 bundle()来把全部依赖都打包成 bundle.js ，可是注意，browserify 不是一个专门为 gulp 写的包，全部它输出的数据流并不能直接 pipe 给 gulp 使用，因此，须要用到 source()接口，也就是 vinyl-source-stream 这个工具来处理一下，而后 pipe 给 gulp ，gulp.dest 会把输出的 bundle.js 文件保存到 js 文件夹中。

任务写好了，在命令行执行：

gulp jsx

这样就生成了 js/bundle.js 文件了。因为这个文件的标签已经添加到 index.html 中了，因此直接用 chrome 打开就能够看到运行效果了。

文章改编自《当 React 碰见 Gulp 和 Browserify》