子產品化結構已經成為網站開發的主流。
制作網站的主要工作，不再是自己編寫各種功能，而是如何将各種不同的子產品組合在一起。
浏覽器本身并不提供子產品管理的機制，為了調用各個子產品，有時不得不在網頁中，加入一大堆script标簽。這樣就使得網頁體積臃腫，難以維護，還産生大量的HTTP請求，拖慢顯示速度，影響使用者體驗。
為了解決這個問題，前端的子產品管理器（package management）應運而生。它可以輕松管理各種JavaScript腳本的依賴關系，自動加載各個子產品，使得網頁結構清晰合理。不誇張地說，将來所有的前端JavaScript項目，應該都會采用這種方式開發。
最早也是最有名的前端子產品管理器，非RequireJS莫屬。它采用AMD格式，異步加載各種子產品。具體的用法，可以參考我寫的教程。Require.js的問題在于各種參數設定過于繁瑣，不容易學習，很難完全掌握。而且，實際應用中，往往還需要在伺服器端，将所有子產品合并後，再統一加載，這多出了很多工作量。
今天，我介紹另外四種前端子產品管理器：Bower，Browserify，Component和Duo。它們各自都有鮮明的特點，很好地彌補了Require.js的缺陷，是前端開發的利器。
需要說明的是，這篇文章并不是這四種子產品管理器的教程。我隻是想用最簡單的例子，說明它們是幹什麼用的，使得讀者有一個大緻的印象，知道某一種工作有特定的工具可以完成。詳細的用法，還需要參考它們各自的文檔。
Bower
的主要作用是，為子產品的安裝、更新和删除，提供一種統一的、可維護的管理模式。
首先，安裝Bower。
$ npm install -g bower
然後，使用bower install指令安裝各種子產品。下面是一些例子。
# 子產品的名稱
$ bower install jquery
# github使用者名/項目名
$ bower install jquery/jquery
# git代碼倉庫位址
$ bower install git://github.com/user/package.git
# 子產品網址
$ bower install http://example.com/script.js
所謂"安裝"，就是将該子產品（以及其依賴的子產品）下載下傳到目前目錄的bower_components子目錄中。下載下傳後，就可以直接插入網頁。
<script src="/bower_componets/jquery/dist/jquery.min.js">
bower update指令用于更新子產品。
$ bower update jquery
如果不給出子產品的名稱，則更新所有子產品。
bower uninstall指令用于解除安裝子產品。
$ bower uninstall jquery
注意，預設情況下，會連所依賴的子產品一起解除安裝。比如，如果解除安裝jquery-ui，會連jquery一起解除安裝，除非還有别的子產品依賴jquery。
Browserify
本身不是子產品管理器，隻是讓伺服器端的CommonJS格式的子產品可以運作在浏覽器端。這意味着通過它，我們可以使用Node.js的npm子產品管理器。是以，實際上，它等于間接為浏覽器提供了npm的功能。
首先，安裝Browserify。
$ npm install -g browserify
然後，編寫一個伺服器端腳本。
var uniq = require('uniq');
var nums = [ 5, 2, 1, 3, 2, 5, 4, 2, 0, 1 ];
console.log(uniq(nums));
上面代碼中uniq子產品是CommonJS格式，無法在浏覽器中運作。這時，Browserify就登場了，将上面代碼編譯為浏覽器腳本。
$ browserify robot.js > bundle.js
生成的bundle.js可以直接插入網頁。
<script src="bundle.js"></script>
Browserify編譯的時候，會将腳本所依賴的子產品一起編譯進去。這意味着，它可以将多個子產品合并成一個檔案。
Component
是Express架構的作者TJ Holowaychuk開發的子產品管理器。它的基本思想，是将網頁所需要的各種資源（腳本、樣式表、圖檔、字型等）編譯後，放到同一個目錄中（預設是build目錄）。
首先，安裝Component。
$ npm install -g [email protected]
上面代碼之是以需要指定Component的版本，是因為1.0版還沒有正式釋出。
然後，在項目根目錄下，建立一個index.html。
<!DOCTYPE html>
<html>
<head>
<title>Getting Started with Component</title>
<link rel="stylesheet" href="build/build.css">
</head>
<body>
<h1>Getting Started with Component</h1>
<p class="blink">Woo!</p>
<script src="build/build.js"></script>
</body>
</html>
上面代碼中的build.css和build.js，就是Component所要生成的目标檔案。
接着，在項目根目錄下，建立一個component.json檔案，作為項目的配置檔案。
{
"name": "getting-started-with-component",
"dependencies": {
"necolas/normalize.css": "^3.0.0"
},
"scripts": ["index.js"],
"styles": ["index.css"]
}
上面代碼中，指定JavaScript腳本和樣式表的原始檔案是index.js和index.css兩個檔案，并且樣式表依賴normalize子產品（不低于3.0.0版本，但不高于4.0版本）。這裡需要注意，Component子產品的格式是"github使用者名/項目名"。
最後，運作component build指令編譯檔案。
$ component build
installed : necolas/[email protected] in 267ms
build : resolved in 1221ms
build : files in 12ms
build : build/build.js in 76ms - 1kb
build : build/build.css in 80ms - 7kb
在編譯的時候，Component自動使用autoprefixer為CSS屬性加上浏覽器字首。
目前，Component似乎處于停止開發的狀态，代碼倉庫已經将近半年沒有變動過了，官方也推薦優先使用接下來介紹的Duo。
Duo
是在Component的基礎上開發的，文法和配置檔案基本通用，并且借鑒了Browserify和Go語言的一些特點，相當地強大和好用。
首先，安裝Duo。
$ npm install -g duo
然後，編寫一個本地檔案index.js。
var uid = require('matthewmueller/uid');
var fmt = require('yields/fmt');
var msg = fmt('Your unique ID is %s!', uid());
window.alert(msg);
上面代碼加載了uid和fmt兩個子產品，采用Component的"github使用者名/項目名"格式。
接着，編譯最終的腳本檔案。
$ duo index.js > build.js
編譯後的檔案可以直接插入網頁。
<script src="build.js"></script>
Duo不僅可以編譯JavaScript，還可以編譯CSS。
@import 'necolas/normalize.css';
@import './layout/layout.css';
body {
color: teal;
background: url('./background-image.jpg');
編譯時，Duo自動将normalize.css和layout.css，與目前樣式表合并成同一個檔案。
$ duo index.css > build.css
編譯後，插入網頁即可。
<link rel="stylesheet" href="build.css">