目標(biāo)：通過 Gulp 自動運行任務(wù)的方式來使用 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>
前面把兩個組件都寫到一塊了蔬蕊，現(xiàn)在來分割成獨立的文件验夯，具體分割過程可以參考視頻中的演示芦圾。
其中 js/components/Parent.jsx 內(nèi)容如下
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 昔案，內(nèi)容如下:
var Child = React.createClass({
render: function(){
return (
<div> The Child </div>
)
}
});
module.exports = Child;
要真正讓元器件顯示在頁面上需要執(zhí)行 React.render ，這個是寫在 js/app.js 中的咽筋，內(nèi)容如下：
var Parent = require('./components/Parent.jsx');
React.render(<Parent />, document.getElementById('app'));
使用 Browerify 之后溶推，html 文件中只需要有一條 script ，如下：
<script src='js/bundle.js'></script>
所有依賴的 js 內(nèi)容未來都會被編譯到 bundle.js 文件中奸攻。
<h4>安裝 Browserify</h4>
首先要安裝 Gulp 蒜危。這里我假設(shè)大家的系統(tǒng)上都安裝好了 nodejs 并且也全局安裝了 gulp ，也就是敲
gulp -v
是可以看到輸出的睹耐。在這個基礎(chǔ)上辐赞，進入項目目錄還需要來局部安裝 gulp ，browserify 以及相關(guān)的輔助工具：
npm install --save-dev gulp browserify vinyl-source-stream babelify
說一下上面四個包的各自作用：
- gulp 是任務(wù)運行環(huán)境硝训，用來進行任務(wù)調(diào)度
- browserify 用來 require js 的模塊
- vinyl-source-stream 把 browserify 輸出的數(shù)據(jù)進行準(zhǔn)換响委，使之流符合 gulp 的標(biāo)準(zhǔn)
- babelify 本來的主要作用是進行 ES6 的編譯，但是我們這里是使用它的 JSX 編譯功能
然后到 gulpfile.js 中窖梁，填寫如下內(nèi)容：
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 來實現(xiàn)邀窃，Gulp 官方的方案 使用的是 reactify ，當(dāng)然也是可以的假哎。下一步瞬捕，運行 bundle()
來把所有依賴都打包成 bundle.js ，但是注意舵抹，browserify 不是一個專門為 gulp 寫的包肪虎，所有它輸出的數(shù)據(jù)流并不能直接 pipe 給 gulp 使用，所以惧蛹，需要用到 source()
接口扇救，也就是 vinyl-source-stream 這個工具來處理一下，然后 pipe 給 gulp 香嗓，gulp.dest 會把輸出的 bundle.js 文件保存到 js 文件夾中爵政。
任務(wù)寫好了，在命令行執(zhí)行：
gulp browserify
這樣就生成了 js/bundle.js 文件了陶缺。由于這個文件的標(biāo)簽已經(jīng)添加到 index.html 中了，所以直接用 chrome 打開就可以看到運行效果了洁灵。
用chrome瀏覽器安裝react開發(fā)插件饱岸，就能看到react標(biāo)簽了掺出，非常方便
