React.js - an example with browserify and debowerify

前陣子在看 Facebook 的 react/flux 的架構中有注意到一點就是 browserify

在 browserify 的官網有講到它是一個能夠將 node module 的程式載入到前端的 JS 中

只要簡單的透過 require 函式即可，很像以前很常在用的 RequireJS

而恰好 flux 是被 Facebook 註冊為一個 npm 內的 node module

所以在 flux 的 TODO 範例中，他們就是用 browserify 來將 flux 的程式載入到前端

也順便地將 react 透過 browserify 載入，言下之意就是表示

react 和 flux 這兩個都是透過 npm install 進去的，可以透過 Github 上的 package.json 得知，如下



這樣我們在前端的 javascript 中就可以利用下面的方式引入 flux 或 react


但如果你習慣將前端的套件透過 Bower 來管理而不是 npm 的話

那麼在 Facebook 的 react/flux 架構中要怎達成呢? 這個問題馬上就浮現在我腦中...


也就是說今天我剛好都是用 Bower 來管理前端 react, bootstrap ... 等等

那要怎麼透過 browserify 來達成相同的目的呢?

找了一下剛好發現在 Github 上有人寫了一個叫 debowerify 的 browserify transform

簡單說 debowerify 能夠輕易地將任何的 Bower 的元件透過 browserify 載入到前端中

所以這篇就簡單的來介紹一下如何撰寫一個簡單的 React 程式並搭配 browserify 以及 debowerify

再開始之前可以先看一下我之前寫的 React.js - A HelloWorld example with Express and Node.js

因為接下來的範例同樣會以 Express 以及 Node.js 作為基本的環境

我們可以透過下面一連串的指令來初始化這次的範例


上述的第5個指令安裝的 reactify 的元件，它是一個對於 JSX 的 browserify transform

原則上你沒有用 reactify 的話你是沒辦法透過 browserify成功 build 出結果的

而 reactify 內部也是使用 react-tools 這個元件來作 JSX 的轉換(上一篇有提到 react-tools)

接下來就可以開始寫一個簡單的 React 程式了


最後就是頁面的 Jade 程式


跟先前的教學一樣，我們需要加入一個轉換 JSX 後的程式，先前是用 react-tools

這次我們就要透過 browserify + reactify + debowerify 來完成目前的範例

在執行 browserify 的指令來執行 build 的過程前，需要修改一下 package.json

讓 browserify 能夠認得 source transform


完成後執行以下指令就會在 public/js/build 目錄下產生 build.js


到這邊就大功告成了，接下來就用　npm start 啟動 node server 並瀏覽結果

最後附上這次範例的 source code >>>點我<<<