異步加載非核心 CSS

在生產環境中如果依靠前端引用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;</pre> 
Parent 的子元器件Child寫到js/components/Child.jsx中，內容如下: 

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

module.exports = Child;</pre> 
寫到這里，我們已經將兩個組件做了初步的拆分，如果有童鞋對module.exports是神馬還是一知半解或者根本不懂這是要搞什么飛機，那么請去百度自行谷歌CMD規范，相信度娘會很嫵媚的幫你解惑。 

如果要真正讓元器件顯示在頁面上需要執行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 。這里我假設大家的系統上都安裝好了 nodejs 并且也全局安裝了 gulp ，也就是敲gulp -v

是可以看到輸出的。 

首先確認你的電腦已經成功安裝了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 babelify
 
使用Mac的童鞋不要忘記加sudo喲。 

說一下上面四個包的各自作用： 



gulp 是任務運行環境，用來進行任務調度 
</li>


browserify 用來 require js 的模塊 
</li>


vinyl-source-stream 把 browserify 輸出的數據進行準換，使之流符合 gulp 的標準 
</li>


reactify 使用它來實現 JSX 編譯功能 
</li>
</ul>

然后到 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》 
原文 http://segmentfault.com/a/1190000004002631