目标：通过 Gulp 自动运行任务的方式来使用 Browserify 。
<h4>源代码</h4>
<body>
<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>
</body>
<h4>分割文件成为独立的 JSX</h4>
前面把两个组件都写到一块了，现在来分割成独立的文件，具体分割过程可以参考视频中的演示。
其中 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;
要真正让元器件显示在页面上需要执行 React.render ，这个是写在 js/app.js 中的，内容如下：
var Parent = require('./components/Parent.jsx');
React.render(<Parent />, document.getElementById('app'));
使用 Browerify 之后，html 文件中只需要有一条 script ，如下：
<script src='js/bundle.js'></script>
所有依赖的 js 内容未来都会被编译到 bundle.js 文件中。
<h4>安装 Browserify</h4>
首先要安装 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
网友评论