前端模块管理器简介
模塊化結構已經成為網站開發的主流。
制作網站的主要工作，不再是自己編寫各種功能，而是如何將各種不同的模塊組合在一起。
瀏覽器本身并不提供模塊管理的機制，為了調用各個模塊，有時不得不在網頁中，加入一大堆script標簽。這樣就使得網頁體積臃腫，難以維護，還產生大量的HTTP請求，拖慢顯示速度，影響用戶體驗。
為了解決這個問題，前端的模塊管理器（package management）應運而生。它可以輕松管理各種JavaScript腳本的依賴關系，自動加載各個模塊，使得網頁結構清晰合理。不夸張地說，將來所有的前端JavaScript項目，應該都會采用這種方式開發。
最早也是最有名的前端模塊管理器，非RequireJS莫屬。它采用AMD格式，異步加載各種模塊。具體的用法，可以參考我寫的教程。Require.js的問題在于各種參數設置過于繁瑣，不容易學習，很難完全掌握。而且，實際應用中，往往還需要在服務器端，將所有模塊合并后，再統一加載，這多出了很多工作量。
今天，我介紹另外四種前端模塊管理器：Bower，Browserify，Component和Duo。它們各自都有鮮明的特點，很好地彌補了Require.js的缺陷，是前端開發的利器。
需要說明的是，這篇文章并不是這四種模塊管理器的教程。我只是想用最簡單的例子，說明它們是干什么用的，使得讀者有一個大致的印象，知道某一種工作有特定的工具可以完成。詳細的用法，還需要參考它們各自的文檔。
Bower
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
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
Component是Express框架的作者TJ Holowaychuk開發的模塊管理器。它的基本思想，是將網頁所需要的各種資源（腳本、樣式表、圖片、字體等）編譯后，放到同一個目錄中（默認是build目錄）。
首先，安裝Component。
$ npm install -g component@1.0.0-rc5上面代碼之所以需要指定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 buildinstalled : necolas/normalize.css@3.0.1 in 267msbuild : resolved in 1221msbuild : files in 12msbuild : build/build.js in 76ms - 1kbbuild : build/build.css in 80ms - 7kb在編譯的時候，Component自動使用autoprefixer為CSS屬性加上瀏覽器前綴。
目前，Component似乎處于停止開發的狀態，代碼倉庫已經將近半年沒有變動過了，官方也推薦優先使用接下來介紹的Duo。
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">（完）
from:?http://www.ruanyifeng.com/blog/2014/09/package-management.html?
總結
- 上一篇： 入门 Webpack，看这篇就够了
- 下一篇： webpack入门--前端必备