npm、spm、bower 這三個包管理器的比較

先說下前後端模塊管理的區別，後面會着重進行提到的這幾個前端模塊管理工具的比較和介紹。

npm屬於node模塊的管理器。而spm和bower是前端模塊管理。這兩者大的區別有兩點：

1. NPM針對node模塊，原生支持commonJS，而前端模塊除非該管理器自己定了，否則規範是無法統一的。即便規定了commonJS，那麼必定會有配套工具打包來實現實際的運轉。
2. 處理依賴的方式不同。NPM針對的node模塊，它的依賴是樹狀的。項目中用到的A,B,C三個模塊，他們可以分別依賴不同版本的lodash，而互不影響。但是前端模塊除非做了很好的模塊隔離（如實現了commonJS，並能很好地進行打包，即便如此，前端環境的特殊性也無法忍受相同模塊的不同版本並存。比如頁面中引入兩個版本的jQuery，代碼數據傳輸X2），否則一般的依賴都是扁平的。

當然，確實有很多人僅僅將npm作爲一個靜態資源共享平臺，用來發布和共享前端模塊，但是這種做法不推薦，因爲顯然有更好的方案。

而spm和bower都是針對前端模塊化共享而提供的解決方案，這裏還有另一個比較有名的component ，TJ大神的作品。

下面詳細介紹bower，component以及spm：

一、Bower

twitter推出包管理工具。其特點是對包結構沒有強制規範，也因此bower本身並不提供一套構建工具，它充當的基本上是一個靜態資源的共享平臺。

bower本身不存儲模塊文件本身（NPM以及SPM則會將模塊作者的文件打包保存在自己的服務器中），也不保存模塊的版本信息。模塊的發佈者通過註冊（register）的方式，將模塊的可訪問的公開的git地址記錄在bower的數據庫中。而所有的版本都是通過模塊發佈者自己控制代碼庫的tag來決定。

bower在安裝流程基本上可以簡單認爲是將註冊的git地址中的特定tag clone一份到你本地的bower_components 目錄中。

看起來bower本身提供的功能，以及實現都比價簡單，但是它確實使用最廣的前端模塊管理工具。它在github上的項目有1w+的star。之所以bower能這麼流行，得益於它寬鬆的規範能很好地直接應用在很多已經存在的項目中，所有人都能通過簡單地添加一個bower.json以及補充相關信息，不需要修改代碼和目錄結構，就馬上開始使用註冊發佈自己的模塊。

二、component

（好吧，發現官網打不開了，我可是翻牆了....）
TJ大神的項目，它比bower提供了更多規範和配套工具：

1. 它使用commonJS規範
2. 它和bower一樣，不儲存模塊代碼，而是通過 github賬號名/模塊名 的方式作爲一個模塊的標識符，是的，這句話的意思就是它的模塊都是在github上，進一步的意思是，你在github上新建一個public的倉庫的過程就是發佈一個新模塊的過程，另外模塊down到本地後，也會帶上用戶名作爲文件夾。對於有強迫症的人來說，這個有點抓狂，雖然這樣可以解決前端模塊重名的問題（比如，slide，tooltip這類幾乎每個合格的前端開發都自己早過一次輪子的組件，太常見了）
3. 它在配置文件中，羅列出必要的靜態文件資源，因此在下載的過程中，是先抓去這個配置文件，然後再通過github的raw接口去抓取列出的文件。在傳輸效率上比bower的方式高效。且down下來的文件目錄也會比較簡潔。
4. 既然1提到了它使用commonJS，那麼自然它也提供了配套的打包工具component/builder，打包工具包含的內容這裏不細講（要講可以額外再列一個如“有哪些好的前端構建工具推薦？”這樣的問題），主要有兩個特點：
   1. 基於commonJS規範
   2. 面向ES6（是的，你可以在componet中使用ES6的語法，而打包工具會幫你做好兼容，這也是component希望扮演的角色："Component is currently a stopgap for ES6 modules and Web Components" )

附上 Compare component with other solutions

二、spm3

作爲Sea.js - A Module Loader for the Web的生態圈的包管理工具，圍繞seajs而構建的，不僅包含模塊的發佈，傳輸共享，還包含一系列的構建工具。

爲什麼放到最後來講，因爲如果仔細看SPM3（注意是3）的功能，它基本上是對bower，compoent和npm以及其他一些有名的包管理工具優點的吸收。這裏就說說我認爲SPM3的優勢：

1. SPM從3.X開始全面迎向CommonJS，逐步放棄CMD。CMD最有名的實現者是誰？SeaJS！是的，這裏是想說，一方面對於CommonJS支持，能很好地擴大SPM的社區（比如Component的模塊都能輕鬆地遷移過來），另一方面你會看到SPM3在打包上提供了Standalone 模式，不再依賴SeaJS
2. 和NPM的發佈一樣爽快的前端模塊管理平臺。上面提到的bower和component本身都是不託管用戶的模塊代碼的，模塊的使用就是通過開發者自己維護倉庫和版本（打tag）。這樣的問題在於，對於一個模塊的實際版本是否穩定是難以保證的（我可以重複地去打相同的tag）而且代碼掌握在別人手裏穩定性難以保證（component使用github還是可靠，但是bower這種不限定git源的，就難說了）。在SPM中你可以使用如

   $ spm publish
   

   這樣的方式發佈代碼了。
3. 提供了一套完善的構建流程和工具，包含：
   1. 打包
   2. 調試
   3. 測試集成
   4. 文檔生成
4. 支付寶團隊維護（支付寶自己在使用SPM，所以這個工具必定是經過實戰考驗的），中文文檔。這些對於國內用戶來說都是很重要的。

----------------- 總結 --------------------

bower

1. 優點：約束鬆散，使用簡單--> 可用模塊衆多
2. 缺點：沒有提供構建工具（當前應該能從社區中找到針對bower的構建工具），且直接在bower上安裝模塊穩定性難以保證（源的穩定性，以及國內網速的穩定性）。

不過如果是公司級別內部使用的話，結合公司本身的git倉庫，並創建一個私有的bower server，並定製一套規範和打包工具，也是可行的。（好吧，這是我之前考慮過的在我廠內部實施的方案）

component

1. 優點：基於commonJS，有比較完善的構建工具，面向ES6，且能解決命名衝突問題
2. 缺點：基於github，目錄包含用戶名...（我個人無法忍）

spm

1. 優點：託管模塊代碼，國內網絡傳輸的穩定性（這個和bower以及component比起來就是很重要的優勢），完善的構建流程，中文文檔
2. 缺點：模塊數量（目前是400多，和component以及bower的4位數比起來還是有差距）