前端主流依賴管理工具簡(jiǎn)介

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

1. npm

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

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

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

因?yàn)槭菐Т蠹伊私庀嚓P(guān)依賴管理工具的概念，并且在之前的教程中已經(jīng)詳細(xì)講過(guò) npm 的概念及命令的相關(guān)用法，在這里就不一一給大家拓展了。

使用經(jīng)驗(yàn)：

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

2. cnpm

因?yàn)?npm 的服務(wù)器在國(guó)外，所以我們?nèi)粘Ｔ谑褂?npm 去下載一些依賴時(shí)，經(jīng)常會(huì)遇到網(wǎng)絡(luò)原因，下載失敗?；蛘咧苯佑械囊蕾噰?guó)內(nèi)下載不了，需要科學(xué)上網(wǎng)等方式，去下載。這樣相當(dāng)?shù)穆闊?，讓我們開(kāi)發(fā)者內(nèi)心倍受折磨。

于是我們國(guó)內(nèi)的淘寶團(tuán)隊(duì)做了國(guó)內(nèi)鏡像，給廣大開(kāi)發(fā)者帶來(lái)極大的便利。淘寶鏡像與官方同步頻率目前為 10 分鐘 一次以保證盡量與官方服務(wù)同步。大家可以理解為，依賴還是之前的依賴，但是下載的地址由國(guó)外服務(wù)器轉(zhuǎn)向國(guó)內(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)驗(yàn)：

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

3. Bower

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

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

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

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

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

它生成的 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)驗(yàn)：

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

4. pnpm

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

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

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

使用經(jīng)驗(yàn)：

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

5. 小結(jié)

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