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 得知，如下

	"dependencies": {
	"flux": "^2.0.1",
	"keymirror": "~0.1.0",
	"object-assign": "^1.0.0",
	"react": "^0.12.0"
	}

view raw package.json hosted with ❤ by GitHub

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

	var React = require('react');
	// or
	var flux = require('flux');

view raw ex1.js hosted with ❤ by GitHub

但如果你習慣將前端的套件透過 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 作為基本的環境

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

	$ npm install browserify -g #install browserify to your systems first. But you can just install in you project only
	$ express react-browserify-demo
	$ cd react-browserify-demo
	$ npm install debowerify --save-dev
	$ npm install reactify --save-dev
	# before use bower, plz prepare your bower.json, following is a basic format
	# {
	# "name": "react-browserify-demo",
	# "version": "0.1.0"
	# }
	$ bower install react --save #Here I install react woth bower instead of npm

view raw init.sh hosted with ❤ by GitHub

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

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

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

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

	var React = require("react"); //use require(module_name) to load module.
	React.render(
	<p>Hello, World!</p>,
	document.getElementById('hello')
	);

view raw app.js hosted with ❤ by GitHub

最後就是頁面的 Jade 程式

	extends layout
	block content
	div(id="hello")
	script(src="/js/build/build.js")

view raw index.jade hosted with ❤ by GitHub

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

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

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

讓 browserify 能夠認得 source transform

	"browserify":{
	"transform":["reactify"]
	}

view raw package1.json hosted with ❤ by GitHub

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

	$ cd react-browserify-demo # go into project root folder
	$ browserify -t reactify -t debowerify public/js/src/app.js -o public/js/build/build.js

view raw build.sh hosted with ❤ by GitHub

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

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