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

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

1. npm

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

npm 能持續(xù)保持活力，究其原因，我認(rèn)為主要有如下幾點：

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

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

使用經(jīng)驗：

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

2. cnpm

因為 npm 的服務(wù)器在國外，所以我們?nèi)粘Ｔ谑褂?npm 去下載一些依賴時，經(jīng)常會遇到網(wǎng)絡(luò)原因，下載失敗。或者直接有的依賴國內(nèi)下載不了，需要科學(xué)上網(wǎng)等方式，去下載。這樣相當(dāng)?shù)穆闊?，讓我們開發(fā)者內(nèi)心倍受折磨。

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

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

使用經(jīng)驗：

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

3. Bower

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

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

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

npm install -g bower //安裝到全局環(huán)境

使用方式也和 npm 很相似，如使用 bower init -y 初始化一個目錄，生成一個 bower.json 文件。如果我們想安裝jquery這個依賴，執(zhí)行 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"
  }
}

使用經(jīng)驗：

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

4. pnpm

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

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

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

使用經(jīng)驗：

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

5. 小結(jié)

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