閱讀本文需要有React的基礎知識，可以在React 入門實例教程和React中文官網進行基礎學習。 沒有React基礎也可以學習本文，本文主要不是學習React，而是gulp+browserify進行模塊化開發。 1.創建項目和環境搭建 我們可以先創建一個文件夾叫react_item,作為項目的根 ...
閱讀本文需要有React的基礎知識，可以在React 入門實例教程和React中文官網進行基礎學習。
沒有React基礎也可以學習本文，本文主要不是學習React，而是gulp+browserify進行模塊化開發。
1.創建項目和環境搭建
我們可以先創建一個文件夾叫react_item,作為項目的根目錄。
打開命令行，cd到項目的根目錄下，我們需要通過npm安裝gulp，輸入：
npm install gulp -g--save-dev
Tip:沒有安裝node.js的朋友可以進入node.js中文網下載
gulp是前端項目的自動化構建工具，可以讓我們方便的管理自己的項目，節約了我們大量的時間，詳情見gulp中文網
接下來還需要安裝browserify，和上面一樣，通過npm去安裝：
npm install browserify --save-dev
因為項目使用React進行開發，需要要安裝react.js和react-dom.js。正常情況下我們不會把JS文件放在瀏覽器端用browser.js去編譯，所以需要在本地安裝reactify插件，把JSX編譯成JS。我們還需要一個插件，用來把我們得到的代碼轉換成文件流，生成JS文件，這裡使用vinyl-source-stream插件。
附上安裝以上文件的代碼：
npm install react --save-dev npm install react-dom --save-dev npm install reactify --save-dev npm install vinyl-source-stream --save-dev
到此為止，我們項目的環境算了搭建完成了！
2.項目的部署
先附上項目根目錄的結構圖：
我們要生成一個npm的初始化文件，以便於項目的管理，cd到項目根目錄，輸入：
npm init
需要輸入項目名稱，項目版本號...（隨便輸入，無所謂）
輸入完，你就會發現在你項目下會自動生成一個package.json文件，打開可以發現，裡面是npm對於項目的一些基本配置。
接下來，我們打開app文件夾，在app文件夾下新建兩個JS文件，分別為：layout.js和list.js，分別加入以下內容：
layout.js
var React = require('react'); var ReactDOM = require("react-dom"); var List = require("./list.js"); var Layout = React.createClass ({ render:function(){ return ( <div> this is Layout <List/> </div> ) } }) ReactDOM.render(<Layout/>,document.body);
list.js
var React = require('react'); var List = React.createClass ({ render:function(){ return ( <div> this is List </div> ) } }) module.exports=List;
經常使用node.js的朋友應該很熟悉裡面的require和module.exports語句，require是用來請求一個文件或模塊，module.exports是給當前模塊設置一個對外介面，這樣，其他的文件就能夠通過這個介面直接require請求到這個模塊了。
分析一下上面的代碼，首先，我們在layout.js中請求了react和react-dom，和node.js一樣，這裡可以不用加.js尾碼。還請求了list.js這個文件，因為下麵我們要把list.js中的List組件插入到Layout組件中。
在list.js中，我們只引入了react，因為List組件不負責渲染的工作，它只需要生成虛擬DOM，並插入到Layout組件中，最後，把List組件設置成對外介面。
因為layout.js需要把元素插入到body內，我們需要在build文件夾內新建一個index.html，內容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React+gulp+borwserify</title> </head> <body> <script src="app/app.js"></script> </body> </html>
這裡引入了一個app.js的文件，我們會把最終的代碼放到app.js中，請跟著我耐心往下看。
做完了這些，大家可能會想，我們是在寫項目中的JS啊，並不是在寫Sea.js之類的JS管理依賴文件，這些require和module.exports由誰去編譯呢？
好的，下麵我們就開始配置browserify了！
3.browserify的配置
我們在根目錄下創建一個gulp的配置文件：
// gulp只負責文件執行功能 var gulp = require('gulp'); //browserify負責各個模塊的依賴關係 var browserify = require('browserify'); //reactify 責把JSX內容轉換成瀏覽器可以識別的JS內容 var reactify = require('reactify'); //vinyl-source-stream是一個文件流的處理插件 var source = require('vinyl-source-stream'); //執行gulp命令 gulp.task('merge',function(){ return browserify('build/layout.js') //這裡是browserify需要管理的文件，因為layout.js依賴list.js //所以browserify會自動引入list.js .transform(reactify)//browserify下的轉換功能，我們把reactify傳入，表示把JSX轉換成JS .bundle()//把所有JS代碼合併成一個文件，包括react等依賴的文件，這裡返回的是一個字元串 .pipe(source('app.js'))//轉換成文件流 .pipe(gulp.dest('app'))//插入到這個目錄下 });
上面的註釋把每一步操作都做瞭解釋，可能大家覺得很複雜，但是其實實際項目的開發中，只需要配置一次，你只需要把這段代碼copy過去，按照你的項目路徑修改一下就行了。
接下來就cd到根目錄，運行gulp，在需要在命令行輸入：
gulp merge
等待幾秒鐘，執行完畢後進入app目錄下，你會看到一個app.js的文件，這個文件里集成了layout.js運行所依賴的組件和模塊的所有代碼
現在，只要運行index.html，如果你看到如下頁面，那說明成功了！
4.總結
直接在項目JS文件中使用require和module.exports命令，是不是很爽啊，這樣就不用再一個個的引入文件了，而且還自動編譯了JSX。
gulp+browserify並不是專門供React使用的，所有項目都可以使用它，相比較Sea.js和Require.js，它的優勢在於，能在引入模塊和文件的過程中做一些事。
不過真正的React項目開發，還是使用webpack去管理項目比較好，畢竟這是FB專門為React量身定製的，下次有時間再寫個webpack+react的簡單項目實例吧。
