首頁>網頁設計教程>Javascript教程

學習兩個強大的Node封包管理器：npm 和yarn

作者：Eve Cole 更新時間：2023-04-04 10:39:22

這篇文章帶大家了解Node.js的兩個強大套件管理器：npm 和yarn，希望對大家有幫助！


6306e547ba2a5383.jpg


node.js極速入門課程：進入學習

學習Node的第一步就是要了解node的套件管理器： npm ，對於npm相信大家並不陌生，因為我們常用它去下載一些套件資源

但因為npm的資源庫（https://www.npmjs.com/）在國外，使用它下載資源的速度比較慢，於是就出現了yarn這些第三方的node包管理器以及國內的跟npm倉庫同步更新的淘寶鏡像（cnpm）

接下來我們將深入去學習這些內容，讓我們開始吧！

Node系列專欄開始更新了，關注博主，訂閱專欄，學習Node不迷路！

一、npm的使用

npm是什麼

使用npm前首先要了解什麼是npm ，在Node系列專欄的第一篇文章【Node.js | 從前端到全棧的必經之路】中提到npm是Node的開源倉庫，並且是全球最大的開源倉庫

這個倉庫網址是：https://www.npmjs.com/

截至2020年3月17日， npm為大約1,200萬開發人員提供了130萬個軟體包，這些開發人員每月下載這些軟體包達750億次

想要去下載使用npm倉庫裡面的資源可以使用npm的指令（ npm開頭的，如npm i axios下載axios ）或使用其它第三方的指令（第三方的Node包管理器），如yarn等

官方說法： npm是NodeJS的套件管理和分發工具

套件管理就體現在它是個NodeJS的倉庫，存放並管理著NodeJS的各種軟體包

分發工具就體現在使用npm的指令去下載npm倉庫裡的包

當我們配置NodeJS環境時， npm指令模块是隨著NodeJS一起安裝的，我們可以透過終端機運行npm -v查看安裝的版本：


在這裡插入圖片描述


但如果預設安裝的npm版本太老，你也可以自己手動安裝更新npm ：

 npm i npm@latest -g

@latest代表安裝最新版本， -g代表全域安裝，這些npm指令將在後面講到

上面可以發現一個神奇的事情，我們正在透過npm安裝npm ，自己安裝自己？

這其實很好理解， npm的指令模块也是作為一個包存放於npm這個倉庫中的，並且這個包的名字就叫npm ，見npm地址：

https://www.npmjs.com/package/npm


在這裡插入圖片描述


所以我們一般稱呼的npm都只是指npm的這個指令模組（這個名為npm的套件）

但其實npm這個字就是代指了npm指令模块，也代指了npm這個NodeJS開源倉庫本身所以就有了我們在npm中（這個npm代表NodeJS的開源倉庫）下載npm （這個npm代表名為npm的這個包，這個包是npm的指令模組）的說法

npm常用指令

npm的指令非常多，這裡只列舉出常用的，更多資訊可見npm官方文檔

  • 在這裡插入圖片描述 npm init ：產生package.json



  • npm install ：下載package.json中記錄的所有資源

  • npm install 包名：下載指定的套件到目前目錄下

  • npm uninstall 包名：卸載目前目錄下指定的套件

  • npm update 包名：更新目前目錄下指定的包，不加包名則更新目前目錄下所有包

  • npm outdated 包名：檢查目前目錄下指定包是否過時，不加包名則檢查當前目錄下所有包

  • npm info 包名：獲取當前目錄下包的詳細信息

  • npm list ：查看目前目錄下安裝的所有套件及其相依性並顯示版本號（ list可簡寫為ls ）

  • npm list 包名：查看目前目錄下安裝的指定套件的版本號碼（ list可簡寫為ls ）

幾點補充：

  1. install可簡寫為i ，如： npm install axios可簡寫為npm i axios

  2. uninstall可簡寫為un

  3. 在套件名稱後面加上@符號可指定套件的版本，如： npm i md5@1下載1版本的md5， npm i md5@latest表示下載最新版本的md5

npm指令後綴

  • -g ：指定全域環境

    npm指令預設是在目前目錄下操作，加上-g是指定在全域環境下操作，如上所提到的全域安裝npm最新版： npm i npm@latest -g ，這樣在任何目錄下都能使用npm

  • --save可簡寫為-s ： 指定生產環境下的依賴（記錄在dependencies中）

    npm5版本之後預設是--save ，如安裝在生產環境和開發環境都需要用到的axios： npm i axios -s

  • --save-dev可簡寫為-D ：指定開發環境下的依賴（記錄在devDependencies中）

    如安裝生產環境下不需要使用的babel（僅在開發環境下使用的到）： npm i babel -D

  • --save-prod可簡寫為-P ：與--save相同

  • --save-optional可簡寫為-O ：指定可選依賴（記錄在optionalDependencies中）

  • --no-save ：不會記錄在package.json中

關於-g，--save，--save-dev的具體作用和區別可看我的這篇文章：npm install -g/–save/–save-dev的區別

npm指令後綴也可以放到包名的前面： npm i -g npm@latest

依賴套件管理

在npm中，熟知的依賴是： dependencies和devDependencies

除此之外，其實還有包括：

  • peerDependencies ,

  • optionalDependencies

  • bundledDependencies / bundleDependencies

在內的幾種依賴，這些都是在package.json中進行記錄的：


在這裡插入圖片描述


上面我們說npm指令後綴時提到了這幾種依賴，這裡詳細說一下它們代表什麼：

dependencies和devDependencies

可查看我的另一篇文章： npm install -g/–save/–save-dev的差異

peerDependencies

可看大佬的文章：一文搞懂peerDependencies

optionalDependencies

可選依賴，如果有一些依賴包即使安裝失敗，項目仍然能夠運行或希望npm繼續運行，就可以使用optionalDependencies ，另外optionalDependencies會覆蓋dependencies中的同名依賴包，所以不要在兩個地方都寫

bundledDependencies / bundleDependencies

打包依賴， bundledDependencies是一個包含依賴包名的數組對象，在發佈時會將這個對像中的包打包到最終的發布包裡，數組裡面的包必須先在devDependencies或dependencies聲明過，否則打包會報錯

package.json中需要注意的套件版本問題

透過npm下載的所有套件的版本資訊都會記錄在package.json中

在執行npm i時就會根據package.json中記錄的套件資訊進行下載，它的下載規則如下：

  • 包版本以^開頭時（預設情況） ，會鎖定大版本

    // package.json
"dependencies": {
"md5": "^2.1.0" // ^開頭的 },

    透過npm i將會安裝md5 2.xx的最新版本（2大版本下的最新版本），不一定是2.1.0，還可能是2.3.0

  • 套件版本以~開頭時，會鎖定到第二個大版本

    // package.json
"dependencies": {
"md5": "~2.1.0"
},

    透過npm i將會安裝md5 2.1.x的最新版本（2.1版本下的最新版本），不一定是2.1.0，也可能是2.1.1

  • 套件版本為* ，會鎖定到最新版本

    // package.json
"dependencies": {
"md5": "*"
},

    透過npm i將會安裝md5的最新版本

  • 套件版本前不帶前綴，會鎖定到指定版本

    // package.json
"dependencies": {
"md5": "2.1.0"
},

    透過npm i將會安裝md5的2.1.0版本

解決npm速度慢的問題

因為npm倉庫在國外，我們在國內使用npm指令下載這個國外倉庫的內容速度會比較慢

這時我們就可以執行以下指令將npm的倉庫來源切換到國內的淘寶鏡像（cnpm）的來源：

 npm config set registry https://registry.npmmirror.com

使用npm config get registry查看目前來源：

在這裡插入圖片描述


往後再使用npm時就會自動從國內的淘寶鏡像倉庫下載了，速度就會很快

淘寶鏡像之前的來源位址為http://registry.npm.taobao.org，現在更改為了http://registry.npmmirror.com，請參閱詳情

但我們這樣透過修改npm的設定進行來源的切換難免會有點麻煩，我們可以全域安裝一個nrm來幫助我們快速的切換npm來源

使用nrm快速切換npm來源

全域安裝nrm ：

 npm install -g nrm

執行nrm ls可查看可切換的npm來源：


在這裡插入圖片描述


使用npm use切換來源，如切換到淘寶源： nrm use taobao


在這裡插入圖片描述


使用nrm test 源名測試對應來源的回應時間：


在這裡插入圖片描述


可以看到淘寶源的反應速度比npm的預設源快很多

中國npm鏡像：cnpm

cnpm是一個完整的npmjs.org鏡像，可以用它來取代官方版本

cnpm與官方版本的同步頻率為10分鐘一次，cnpm官網

下載cnpm ：

 npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm就是淘寶鏡像，上面我們使用淘寶鏡像來源只是將npm的來源更改為淘寶鏡像（ cnpm ）的來源（這個來源其實就是指倉庫的位址），之後還是透過npm指令進行使用

而這裡是直接下載cnpm這個完整鏡像，之後就可以使用cnpm指令而不是npm指令：

 cnpm installcnpm i axios -g

// ....

cnpm的指令與npm的指令完全相同，使用時直接使用cnpm代替npm就行

二、yarn的使用

yarn是Facebook發表的一款依賴管理工具，它比npm更快、更有效率

安裝：

 npm install -g yarn

更新yarn：

 yarn set version latest
yarn set version from sources

優點

  • 速度超快
    yarn快取了每個下載過的包，所以再次使用時無需重複下載。 同時利用並行下載以最大化資源利用率，因此安裝速度更快

  • 超級安全<br/> 在執行程式碼之前， yarn會透過演算法校驗每個安裝包的完整性

yarn常用指令


在這裡插入圖片描述

  • yarn init ：初始化項目，產生package.json文件，產生步驟與npm init大致相同

  • yarn help ：顯示指令列表

  • yarn install ：下載package.json中記錄的所有資源，可簡寫為yarn

  • yarn add 包名：下載指定的套件到目前目錄下

  • yarn remove 包名：卸載目前目錄下指定的包

  • yarn upgrade 包名：更新目前目錄下指定的包，包名後可加@指定版本号來指定需要更新到的版本

yarn指令後綴

  • --dev ：指定開發環境下的依賴（ devDependencies ），簡寫為-D

  • --peer ：指定核心依賴（ peerDependencies ）

  • --optional ：指定可選依賴（ optionalDependencies ）

結語

本篇文章介紹了npm和yarn ，以及npm派生出的nrm ， cnpm等

部落客一直使用的是npm + nrm切換來源的組合，因為這樣不僅能保證速度快，能夠方便的切換源，還不用下載像cnpm ， yarn這些額外的包

npm和yarn的內容都比較多，本篇文章只是講解了最常用的內容，如果想要了解更多可移步到對應的官網進行查看

相關文章