前端主流依賴管理工具簡介

前言：大家好，很高興和大家又見面啦！之前得幾個小節，主要給大家介紹了 Yarn 的相關知識和使用技巧。我們知道，前端這個技術棧，是近幾年前后端分離的這個天才思路出現后，才得以迅猛發展，在日常的開發中扮演著越來越重要的角色。前人說：工欲善其事必先利其器。前端的發展，離不開眾多優秀的工具，本文將以橫向對比的思路，帶大家認識一下市場上主流的，跟 yarn 的地位差不多的各種依賴管理工具。

1. npm

作為前端包管理工具的開拓者，npm 就像一個里程碑一樣，幾經風雨仍然屹立不倒。雖然近幾年，如 yarn、cnpm、pnpm 等優秀的前端依賴管理工具，如雨后春筍一般冒了出來，并且在市場上相繼擁有眾多開發者粉絲。但是細心的同學可以發現，他們都無法撼動 npm 的地位，npm的相關社區依舊火熱。據npm的官網統計，npm 目前擁有來自世界各地開發者發布的超過 600000 個包（代碼模塊），每周大約有超 30億次的下載量，其驚人的影響力可見一斑。

npm 能持續保持活力，究其原因，我認為主要有如下幾點：

• npm是node.js內置的依賴管理器，現在的前端開發，離不開 node 環境，只要我們配置好 node，可以直接使用npm，其他的依賴工具，如 yarn,cnpm等其他工具，都需要使用 npm 或者其他方式間接去安裝再使用，這個概念就像我們買了電腦可以直接使用 window 或者 mac系統一樣方便。
• npm 首先提出了如 package.json 注冊表去管理所有依賴，以及使用命令行去操作依賴更新刪除等操作，非常的方便。這個思路也被后續的其他依賴管理工具紛紛效仿。
• 之前一直被開發者詬病的幾點，如版本鎖定，安裝速度等問題，隨著新版本 npm 的發布，已經有了非常明顯的改觀，可以說 npm5 之后，單從下載依賴速度和版本管理等方面來看，npm 已經不遜色于其他的依賴管理工具。

因為是帶大家了解相關依賴管理工具的概念，并且在之前的教程中已經詳細講過 npm 的概念及命令的相關用法，在這里就不一一給大家拓展了。

使用經驗：

npm 作為最早一批出現的依賴管理工具，不管你是否習慣使用它，還是喜歡用別的工具，他的基本用法大家都應該了解，這樣也能讓我們更快的理解別的工具的思路和用法。

2. cnpm

因為 npm 的服務器在國外，所以我們日常在使用 npm 去下載一些依賴時，經常會遇到網絡原因，下載失敗?；蛘咧苯佑械囊蕾噰鴥认螺d不了，需要科學上網等方式，去下載。這樣相當的麻煩，讓我們開發者內心倍受折磨。

于是我們國內的淘寶團隊做了國內鏡像，給廣大開發者帶來極大的便利。淘寶鏡像與官方同步頻率目前為 10 分鐘 一次以保證盡量與官方服務同步。大家可以理解為，依賴還是之前的依賴，但是下載的地址由國外服務器轉向國內，這樣既提升了下載速度，又提高了下載的成功率。

cnpm 的命令使用方法和 npm 相似。
如果需要安裝依賴，npm 的命令為：npm install ,cnpm 的命令則為 cnpm install

安裝使用 cnpm 的方式略有不同，我們可以使用 npm 直接安裝：

npm install cnpm -g --registry=https://registry.npm.taobao.org

也可以采用修改 npm 下載地址的方式，去使用 cnpm：

npm config set registry https://registry.npm.taobao.org

使用經驗：

cnpm 可以被看做是更改了下載地址的 npm，優化了下載效率。但是經過開發中的實測經驗，cnpm 雖然速度快，但是下載的依賴有時會出現莫名其妙的問題，導致項目出現 bug，并且非常難以解決。所以個人不推薦使用 cnpm 作為我們常用的依賴管理工具。

3. Bower

Bower 是一個小眾的前端管理工具，他的使用熱度沒有 npm 或者 yarn那么高，但是它也屬于主流的前端依賴管理工具之一，所以在這里給大家簡單介紹下。

bower 和 npm 很像，就像孿生兄弟一樣。npm 的依賴管理文件是 package.json ，包安裝的目錄是 node_modules。
bower 的依賴管理文件文件是 bower.json ，包安裝的目錄是 bower_components。區別是：Bower 可以自定義依賴的下載目錄結構，意思是說，你在哪個文件目錄打開的 bower，那么它就會在那個文件下，下載你需要的包，而 npm 就不支持這個。

它的安裝方式有幾種，最簡單的是直接使用 npm 安裝：

npm install -g bower //安裝到全局環境

使用方式也和 npm 很相似，如使用 bower init -y 初始化一個目錄，生成一個 bower.json 文件。如果我們想安裝jquery這個依賴，執行 bower install jquery ，是不是有種很熟悉的感覺！

它生成的 bower.json 文件格式，也跟 package.json 文件差不多，具體如下：

{
  "name": "down",
  "authors": [
    "xxxxxxxx"
  ],
  "description": "",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
  ],
  "dependencies": {
    "jquery": "^2.2.2"
  }
}

使用經驗：

Bower 沒有npm熱度那么高，但是他們的用法和思路都很相似，上手很快，大家可以作為一個拓展知識，親自上手嘗試使用一下，相信會有新的感悟和收獲。

4. pnpm

pnpm 是一個比較新的依賴管理工具，它的出現，和 yarn 一樣，是為了解決某些 npm 的痛點的。npm3 開始采用了扁平的依賴關系樹來處理包的依賴，而現在的前端項目越來越龐大復雜，很多時候有成百上千的依賴包，每次安裝包就得好等一會，而且大量浪費磁盤空間。關于這個缺陷，yarn 是使用本地緩存來優化，而 pnpm 是利用硬鏈接和符號鏈接來避免復制所有本地緩存源文件，不用每個項目復制一堆包。這就體現出了 pnpm 的優勢。

pnpm的使用方法，或者說命令，也基本上和 npm一樣，不過它內部重構了 npm 的一些命令，大概概括如下：

• install
• update
• uninstall
• link
• prune
• list
• install-test
• outdated
• rebuild
• root
• help

使用經驗：

只需要使用 npm 去安裝 pnpm，基本上所有 npm 可以用的命令，都可以使用 pnpm 去替代，這一點跟 cnpm 很相似，但是它和 cnpm 解決的不是同一個問題，這個大家要切記！

5. 小結

近幾年前端發展的越來越快，相關的工具也越來越多。關于項目中具體選用哪種依賴管理工具，是由項目本身的特點，結合我們自身的使用經驗去決定的。作為開發者，希望大家可以多了解一些工具的使用方法和特性，到時候真正使用的時候才會得心應手。