browserify 與 watchify 分享

本篇來分享一下在 gulp 的建構環境中如何使用 browserify 以及 watchify

如果對 gulp 與 browserify 不熟的的建議要先學習一下，browserify 之前的文章都有提到過了

而 gulp 則是一個目前盛行於 javascript 的建構工具，相較於 Grunt 而言，實在是好用太多了 ^.^

至於為什麼要介紹 browserify 與 watchify，其目的在於希望能夠再開發的過程中

如果一有程式的變動，就能夠自動執行 browserify 建構的動作，基於這個因素就需要 watchify 的協助

對 gulp 有初步了解的開發者可能也知道 gulp 本身自帶有 gulp.watch 的功能

也是一個能夠自動監控檔案，當檔案發生變化時會自動執行開發者指定的函式，例如：

但 gulp.watch 的功能與 browserify 的整合比較困難，畢竟一個 javascript 的 dependency 是相當複雜的

如果利用 watchify 好處就是它只會 rebuild (重新建構) 有需要重新建構的程式

所以接下來就來分享一下，如何利用 browserify 與 watchify 來達成這樣子的一個目標

React.js - a flux example with ES6 and Babel

這篇介紹一下用最新的 ECMAScript 6 的語法並搭配 Babel 來開發一個簡單的 react/flux 的程式

同樣這次的範例程式會放在 GitHub 上 >>在這裡<<

不知道 react/flux 的可以看我>>上一篇的教學<< 有寫一個簡單的 react/flux app

對 flux 有疑問或不清楚的可以 google 找一下資料，而我之前也有寫一篇對 flux 的>>心得分享<<

接下來回到主題，ECMAScript 6 以下都會簡稱 ES6，在2014確定了所有的新功能與語法

預定在今年 2015 6月左右會正式發佈，接下來瀏覽器會慢慢完全支援 ES6 的語法

所以這篇就用 ES6 來重寫一次 react/flux 的程式

雖然目前瀏覽器並沒有完全支援 ES6 的語法，不過我們可以透過 Babel 這個工具進行轉換

Babel 的原名叫做 6to5，也就是一個能夠將 ES6 轉換為 ES5 的工具，所以也不用擔心瀏覽器對 es6 的相容性問題了

至於為什麼要這麼快用 ES6 來開發程式？如果看過 ES6 的新功能之後，確實是蠻讓人期待的，之後有空再來介紹

另外也是因為有了 Babel 這類的工具，讓目前尚未完全支援 ES6 的情況下

可以開始專攻 ES6，等到之後 ES6 完全被瀏覽器支援後，你也不用考慮要重新寫程式了，因為你已經是在寫 ES6了

React.js - react/flux 範例

本篇教學範例的完整原始碼在 >>這裡<<

如果對 Flux 的架構和細節有不清楚的，網路資源很多可以查，建議看英文比較好

我之前有寫一篇關於 Flux 的架構分想也可以參考 >>Facebook/Flux 架構分享<<

這邊在用最簡單的方式介紹一下 Flux 的架構

原則上 Flux 是一個資料流只有單一方向的設計原則，並且把原件區分為 View, Action, Store, Dispatcher

以下用一張簡單的圖來說明

第一張圖是 Flux 的架構圖，我有簡化過，因為我是認為 Flux 的原圖會讓人誤會

第二張圖是實際的運行中的資料流

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 架構中要怎達成呢? 這個問題馬上就浮現在我腦中...