在生產(chǎn)環(huán)境中如果依靠前端引用JSXTransformer.js文件來(lái)實(shí)現(xiàn)JSX向JavaScript的轉(zhuǎn)換，那是絕對(duì)不靠譜的。所以，使用Reactjs的童鞋就需要使用更有逼格的方式來(lái)完成這項(xiàng)任務(wù)。作為現(xiàn)在最常用的前端構(gòu)建工具gulp搭配上Browserify來(lái)搞定這個(gè)問(wèn)題那真是拉風(fēng)的不要不要的 ：）

廢話不多說(shuō)，咱們來(lái)點(diǎn)直接的吧。

源代碼

我們這次的任務(wù)就是讓這段滿目瘡痍的源代碼變得更優(yōu)化，千里之行，這是開(kāi)始。如果有童鞋看不懂這段代碼是用來(lái)做神馬的，那么我只能說(shuō)，“媽媽叫你回家看基礎(chǔ)了。”回家之路（看不懂代碼的，請(qǐng)猛戳）。

<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>

優(yōu)化

前面把兩個(gè)組件都寫(xiě)到一塊了，現(xiàn)在來(lái)分割成獨(dú)立的文件。其中一個(gè)命名為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寫(xiě)到j(luò)s/components/Child.jsx中，內(nèi)容如下:

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

寫(xiě)到這里，我們已經(jīng)將兩個(gè)組件做了初步的拆分，如果有童鞋對(duì)module.exports是神馬還是一知半解或者根本不懂這是要搞什么飛機(jī)，那么請(qǐng)去百度自行谷歌commonjs，相信度娘會(huì)很嫵媚的幫你解惑。

如果要真正讓元器件顯示在頁(yè)面上需要執(zhí)行React.render函數(shù)，這個(gè)是寫(xiě)在js/app.js中的，內(nèi)容如下：

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

做到這里，我們還順帶了做了一件很有意義的事情，就是對(duì)文件文件目錄做了優(yōu)化，組件放置在/components文件夾中，啟動(dòng)放置在根目錄/js下，清晰明了。

使用Browerify之后，html文件中只需要引入一個(gè)自定義script文件就好了 ，如下：

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

所有依賴的js內(nèi)容未來(lái)都會(huì)被編譯到bundle.js文件中。

安裝 Browserify

工欲善其事，必先利其器。如果還沒(méi)有安裝gulp的童鞋可以參考我曾經(jīng)寫(xiě)的《這年頭，不用點(diǎn)道具（gulp），你都不好意思說(shuō)你是做前端的》來(lái)安裝一下（名字略長(zhǎng)略長(zhǎng)，但有沒(méi)有很貼心，服務(wù)就是要做全套嘛）。

如果你在命令行敲擊如下命令

gulp -v

輸出結(jié)果大概如下面這個(gè)這樣子的話，那就說(shuō)明你已經(jīng)成功安裝了gulp。

CLI version 3.9.0 Local version 3.9.0

在這個(gè)基礎(chǔ)上，進(jìn)入項(xiàng)目目錄還需要來(lái)局部安裝 gulp ，browserify 以及相關(guān)的輔助工具：

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

使用Mac的童鞋不要忘記加sudo喲。

說(shuō)一下上面四個(gè)包的各自作用：

• gulp 是任務(wù)運(yùn)行環(huán)境，用來(lái)進(jìn)行任務(wù)調(diào)度

• browserify 用來(lái) require js 的模塊

• vinyl-source-stream 把 browserify 輸出的數(shù)據(jù)進(jìn)行準(zhǔn)換，使之流符合 gulp 的標(biāo)準(zhǔn)

• reactify 使用它來(lái)實(shí)現(xiàn) JSX 編譯功能

然后到 gulpfile.js 中，填寫(xiě)如下內(nèi)容：

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')); });

來(lái)解釋一下上面的腳本流程。首先就是把入口文件 app.js 交給 browserify 進(jìn)行處理，對(duì)于 jsx 的編譯，官方推薦使用的就是reactify。下一步，運(yùn)行 bundle()來(lái)把所有依賴都打包成 bundle.js ，但是注意，browserify 不是一個(gè)專門為 gulp 寫(xiě)的包，所有它輸出的數(shù)據(jù)流并不能直接 pipe 給 gulp 使用，所以，需要用到 source()接口，也就是 vinyl-source-stream 這個(gè)工具來(lái)處理一下，然后 pipe 給 gulp ，gulp.dest 會(huì)把輸出的 bundle.js 文件保存到 js 文件夾中。

任務(wù)寫(xiě)好了，在命令行執(zhí)行：

gulp jsx

這樣就生成了 js/bundle.js 文件了。由于這個(gè)文件的標(biāo)簽已經(jīng)添加到 index.html 中了，所以直接用 chrome 打開(kāi)就可以看到運(yùn)行效果了。

文章改編自《當(dāng) React 遇見(jiàn) Gulp 和 Browserify》

總結(jié)

以上是生活随笔為你收集整理的听说，当使用Reactjs的时候，Gulp和Browserify很配哦的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。