1、包管理工具npm

（1）包管理工具npm：

• Node Package Manager，也就是Node包管理器；
• 但是目前已經(jīng)不僅僅是Node包管理器了，在前端項(xiàng)目中我們也在使用它來(lái)管理依賴的包；
• 比如vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack等等；

（2）如何下載和安裝npm工具呢？

• npm屬于node的一個(gè)管理工具，所以我們需要先安裝Node；
• node管理工具：https://nodejs.org/en/，安裝Node的過(guò)程會(huì)自動(dòng)安裝npm工具；

（3）npm管理的包可以在哪里查看、搜索呢？

• https://www.npmjs.org/
• 這是我們安裝相關(guān)的npm包的官網(wǎng)；

（4）npm管理的包存放在哪里呢？

• 我們發(fā)布自己的包其實(shí)是發(fā)布到registry上面的；
• 當(dāng)我們安裝一個(gè)包時(shí)其實(shí)是從registry上面下載的包；

2、npm的配置文件

那么對(duì)于一個(gè)項(xiàng)目來(lái)說(shuō)，我們?nèi)绾问褂胣pm來(lái)管理這么多包呢？

• 事實(shí)上，我們每一個(gè)項(xiàng)目都會(huì)有一個(gè)對(duì)應(yīng)的配置文件，無(wú)論是前端項(xiàng)目（Vue、React）還是后端項(xiàng)目（Node）；
• 這個(gè)配置文件會(huì)記錄著你項(xiàng)目的名稱、版本號(hào)、項(xiàng)目描述等；
• 也會(huì)記錄著你項(xiàng)目所依賴的其他庫(kù)的信息和依賴庫(kù)的版本號(hào)；

這個(gè)配置文件就是package.json

那么這個(gè)配置文件如何得到呢？

• 方式一：手動(dòng)從零創(chuàng)建項(xiàng)目，npm init –y
• 方式二：通過(guò)腳手架創(chuàng)建項(xiàng)目，腳手架會(huì)幫助我們生成package.json，并且里面有相關(guān)的配置

3、常見(jiàn)的配置文件

• npm init # 創(chuàng)建時(shí)填寫(xiě)信息
• npm init -y # 所有信息使用默認(rèn)的

Vue CLI4創(chuàng)建的Vue3項(xiàng)目?

?

create-react-app創(chuàng)建的react17項(xiàng)目?

?

4、常見(jiàn)的屬性

必須填寫(xiě)的屬性：name、version

• name是項(xiàng)目的名稱；
• version是當(dāng)前項(xiàng)目的版本號(hào)；
• description是描述信息，很多時(shí)候是作為項(xiàng)目的基本描述；
• author是作者相關(guān)信息（發(fā)布時(shí)用到）；
• license是開(kāi)源協(xié)議（發(fā)布時(shí)用到）；

private屬性：

• private屬性記錄當(dāng)前的項(xiàng)目是否是私有的；
• 當(dāng)值為true時(shí)，npm是不能發(fā)布它的，這是防止私有項(xiàng)目或模塊發(fā)布出去的方式；

main屬性：

設(shè)置程序的入口。

• 比如我們使用axios模塊 const axios = require('axios');
• 如果有main屬性，實(shí)際上是找到對(duì)應(yīng)的main屬性查找文件的；

scripts屬性

• scripts屬性用于配置一些腳本命令，以鍵值對(duì)的形式存在；
• 配置后我們可以通過(guò) npm run 命令的key來(lái)執(zhí)行這個(gè)命令；
• npm start和npm run start的區(qū)別是什么？

? ? ? ? ? ?1.它們是等價(jià)的；
? ? ? ? ? ? 2.對(duì)于常用的 start、 test、stop、restart可以省略掉run直接通過(guò) npm start等方式運(yùn)行；

dependencies屬性

• dependencies屬性是指定無(wú)論開(kāi)發(fā)環(huán)境還是生成環(huán)境都需要依賴的包；
• 通常是我們項(xiàng)目實(shí)際開(kāi)發(fā)用到的一些庫(kù)模塊vue、vuex、vue-router、react、react-dom、axios等等；
• 與之對(duì)應(yīng)的是devDependencies；

devDependencies屬性

• 一些包在生成環(huán)境是不需要的，比如webpack、babel等；
• 這個(gè)時(shí)候我們會(huì)通過(guò) npm install webpack --save-dev，將它安裝到devDependencies屬性中；

peerDependencies屬性

• 還有一種項(xiàng)目依賴關(guān)系是對(duì)等依賴，也就是你依賴的一個(gè)包，它必須是以另外一個(gè)宿主包為前提的；
• 比如element-plus是依賴于vue3的，ant design是依賴于react、react-dom；

5、依賴的版本管理

我們會(huì)發(fā)現(xiàn)安裝的依賴版本出現(xiàn)：^2.0.3或~2.0.3，這是什么意思呢？

npm的包通常需要遵從semver版本規(guī)范：

• semver：https://semver.org/lang/zh-CN/
• npm semver：https://docs.npmjs.com/misc/semver

semver版本規(guī)范是X.Y.Z：

• X主版本號(hào)（major）：當(dāng)你做了不兼容的 API 修改（可能不兼容之前的版本）；
• Y次版本號(hào)（minor）：當(dāng)你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）；
• Z修訂號(hào)（patch）：當(dāng)你做了向下兼容的問(wèn)題修正（沒(méi)有新功能，修復(fù)了之前版本的bug）；

我們這里解釋一下 ^和~的區(qū)別：

• x.y.z：表示一個(gè)明確的版本號(hào)；
• ^x.y.z：表示x是保持不變的，y和z永遠(yuǎn)安裝最新的版本；
• ~x.y.z：表示x和y保持不變的，z永遠(yuǎn)安裝最新的版本；

6、常見(jiàn)屬性

engines屬性

• engines屬性用于指定Node和NPM的版本號(hào)；
• 在安裝的過(guò)程中，會(huì)先檢查對(duì)應(yīng)的引擎版本，如果不符合就會(huì)報(bào)錯(cuò)；
• 事實(shí)上也可以指定所在的操作系統(tǒng) "os" : [ "darwin", "linux" ]，只是很少用到；

browserslist屬性

• 用于配置打包后的JavaScript瀏覽器的兼容情況，參考；
• 否則我們需要手動(dòng)的添加polyfills來(lái)讓支持某些語(yǔ)法；
• 也就是說(shuō)它是為webpack等打包工具服務(wù)的一個(gè)屬性（這里不是詳細(xì)講解webpack等工具的工作原理，所以不再給出詳情）；

7、npm install 命令

安裝npm包分兩種情況：

• 全局安裝（global install）： npm install webpack -g
• 項(xiàng)目（局部）安裝（local install）： npm install webpack

全局安裝

• 全局安裝是直接將某個(gè)包安裝到全局：
• 比如全局安裝yarn：npm install yarn -g

但是很多人對(duì)全局安裝有一些誤會(huì)：

• 通常使用npm全局安裝的包都是一些工具包：yarn、webpack等；
• 并不是類似于 axios、express、koa等庫(kù)文件；
• 所以全局安裝了之后并不能讓我們?cè)谒械捻?xiàng)目中使用 axios等庫(kù)；

8、項(xiàng)目安裝

• 項(xiàng)目安裝會(huì)在當(dāng)前目錄下生成一個(gè) node_modules 文件夾，我們之前講解require查找順序時(shí)有講解過(guò)這個(gè)包在什么情況下被查找；
• 局部安裝分為開(kāi)發(fā)時(shí)依賴和生產(chǎn)時(shí)依賴：

# 默認(rèn)安裝開(kāi)發(fā)和生產(chǎn)依賴
npm install axios
npm i axios

# 開(kāi)發(fā)依賴
npm install webpack --save-dev npm install webpack -D
npm i webpack –D

# 根據(jù)package.json中的依賴包

npm install

9、npm install 原理

很多同學(xué)之前應(yīng)該已經(jīng)會(huì)了 npm install <package>，但是你是否思考過(guò)它的內(nèi)部原理呢？

• 執(zhí)行 npm install它背后幫助我們完成了什么操作？
• 我們會(huì)發(fā)現(xiàn)還有一個(gè)稱之為package-lock.json的文件，它的作用是什么？
• 從npm5開(kāi)始，npm支持緩存策略（來(lái)自yarn的壓力），緩存有什么作用呢？

這是一幅我畫(huà)出的根據(jù) npm install 的原理圖：

npm install會(huì)檢測(cè)是有package-lock.json文件：

沒(méi)有l(wèi)ock文件

1. 分析依賴關(guān)系，這是因?yàn)槲覀兛赡馨鼤?huì)依賴其他的包，并且多個(gè)包之間會(huì)產(chǎn)生相同依賴的情況；
2. 從registry倉(cāng)庫(kù)中下載壓縮包（如果我們?cè)O(shè)置了鏡像，那么會(huì)從鏡像服務(wù)器下載壓縮包）；
3. 獲取到壓縮包后會(huì)對(duì)壓縮包進(jìn)行緩存（從npm5開(kāi)始有的）；
4. 將壓縮包解壓到項(xiàng)目的node_modules文件夾中

有l(wèi)ock文件

• 檢測(cè)lock中包的版本是否和package.json中一致（會(huì)按照semver版本規(guī)范檢測(cè)）；

不一致，那么會(huì)重新構(gòu)建依賴關(guān)系，直接會(huì)走頂層的流程；

• 一致的情況下，會(huì)去優(yōu)先查找緩存

沒(méi)有找到，會(huì)從registry倉(cāng)庫(kù)下載，直接走頂層流程；

• 查找到，會(huì)獲取緩存中的壓縮文件，并且將壓縮文件解壓到node_modules文件夾中；

10、package-lock.json

package-lock.json文件解析：

• name：項(xiàng)目的名稱；
• version：項(xiàng)目的版本；
• lockfileVersion：lock文件的版本；
• requires：使用requires來(lái)跟蹤模塊的依賴關(guān)系；
• dependencies：項(xiàng)目的依賴
• 當(dāng)前項(xiàng)目依賴axios，但是axios依賴follow-redireacts；
• axios中的屬性如下：

? ? ? ? ? ? ? ? ? ? ? ? ? ?1、version表示實(shí)際安裝的axios的版本；
? ? ? ? ? ? ? ? ? ? ? ? ? ?2、resolved用來(lái)記錄下載的地址，registry倉(cāng)庫(kù)中的位置；
? ? ? ? ? ? ? ? ? ? ? ? ? ?3、requires/dependencies記錄當(dāng)前模塊的依賴；
? ? ? ? ? ? ? ? ? ? ? ? ? ?4、integrity用來(lái)從緩存中獲取索引，再通過(guò)索引去獲取壓縮包文件；

11、npm其他命令

我們這里再介紹幾個(gè)比較常用的：

# 卸載某個(gè)依賴包：
npm uninstall package
npm uninstall package --save-dev npm uninstall package -D

# 強(qiáng)制重新build
npm rebuild

# 清除緩存

npm cache clean

npm的命令其實(shí)是非常多的：

• https://docs.npmjs.com/cli-documentation/cli
• 更多的命令，可以根據(jù)需要查閱官方文檔

12、yarn工具

另一個(gè)node包管理工具yarn：

• yarn是由Facebook、Google、Exponent 和 Tilde 聯(lián)合推出了一個(gè)新的 JS 包管理工具；
• yarn 是為了彌補(bǔ) 早期npm 的一些缺陷而出現(xiàn)的；
• 早期的npm存在很多的缺陷，比如安裝依賴速度很慢、版本依賴混亂等等一系列的問(wèn)題；
• 雖然從npm5版本開(kāi)始，進(jìn)行了很多的升級(jí)和改進(jìn)，但是依然很多人喜歡使用yarn；

13、cnpm工具?

? ? ? ? 由于一些特殊的原因，某些情況下我們沒(méi)辦法很好的從 https://registry.npmjs.org下載下來(lái)一些需要的包。

# 查看npm鏡像：
npm config get registry

# 我們可以直接設(shè)置npm的鏡像：
npm config set registry https://registry.npm.taobao.org

但是對(duì)于大多數(shù)人來(lái)說(shuō)（比如我），并不希望將npm鏡像修改了：

• 第一，不太希望隨意修改npm原本從官方下來(lái)包的渠道；
• 第二，擔(dān)心某天淘寶的鏡像掛了或者不維護(hù)了，又要改來(lái)改去；

這個(gè)時(shí)候，我們可以使用cnpm，并且將cnpm設(shè)置為淘寶的鏡像：

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

cnpm config get registry # https://r.npm.taobao.org/

? ? ? ? 以后安裝直接采用cpm替代npm， 例如原生npm命令為：npm install uniq --save，cnpm命令為：cnpm install uniq --save?

14、npx工具

npx是npm5.2之后自帶的一個(gè)命令。

npx的作用非常多，但是比較常見(jiàn)的是使用它來(lái)調(diào)用項(xiàng)目中的某個(gè)模塊的指令。

我們以webpack為例：

• 全局安裝的是webpack5.1.3
• 項(xiàng)目安裝的是webpack3.6.0

如果我在終端執(zhí)行 webpack --version使用的是哪一個(gè)命令呢？

• 顯示結(jié)果會(huì)是 webpack 5.1.3，事實(shí)上使用的是全局的，為什么呢？
• 原因非常簡(jiǎn)單，在當(dāng)前目錄下找不到webpack時(shí)，就會(huì)去全局找，并且執(zhí)行命令；

如何解決這個(gè)問(wèn)題呢？

? ?那么如何使用項(xiàng)目（局部）的webpack，常見(jiàn)的是兩種方式：

• 方式一：明確查找到node_module下面的webpack
• 方式二：在 scripts定義腳本，來(lái)執(zhí)行webpack；

方式一：在終端中使用如下命令（在項(xiàng)目根目錄下）
./node_modules/.bin/webpack --version

方式二：修改package.json中的scripts

"scripts": {
? ? "webpack": "webpack --version"
}

方式三：使用npx

npx webpack --version

npx的原理非常簡(jiǎn)單，它會(huì)到當(dāng)前目錄的node_modules/.bin目錄下查找對(duì)應(yīng)的命令；

15、pnpm工具

15.1、什么是pnpm呢？

什么是pnpm呢？我們來(lái)看一下官方的解釋：

pnpm：我們可以理解成是performant npm縮寫(xiě)；

哪些公司在用呢？

包括Vue在內(nèi)的很多公司或者開(kāi)源項(xiàng)目的包管理工具都切換到了pnpm；

15.2、pnpm到底做了什么呢？?

• 當(dāng)使用 npm 或 Yarn 時(shí)，如果你有 100 個(gè)項(xiàng)目，并且所有項(xiàng)目都有一個(gè)相同的依賴包，那么， 你在硬盤(pán)上就需要保存 100 份該相同依賴包的副本。
• 如果是使用 pnpm，依賴包將被存放在一個(gè)統(tǒng)一的位置，因此：

• 如果你對(duì)同一依賴包使用相同的版本，那么磁盤(pán)上只有這個(gè)依賴包的一份文件；
• 如果你對(duì)同一依賴包需要使用不同的版本，則僅有版本之間不同的文件會(huì)被存儲(chǔ)起來(lái)；
• 所有文件都保存在硬盤(pán)上的統(tǒng)一的位置：

? ? ? ? ? ? ? ? ? 當(dāng)安裝軟件包時(shí)，其包含的所有文件都會(huì)硬鏈接到此位置，而不會(huì)占用額外的硬盤(pán)空間；
? ? ? ? ? ? ? ? ? 這讓你可以在項(xiàng)目之間方便地共享相同版本的依賴包；

15.3、pnpm創(chuàng)建非扁平的 node_modules 目錄

? ? ? ?當(dāng)使用 npm 或 Yarn Classic 安裝依賴包時(shí)，所有軟件包都將被提升到 node_modules 的 根目錄下。

其結(jié)果是，源碼可以訪問(wèn) 本不屬于當(dāng)前項(xiàng)目所設(shè)定的依賴包；

15.4、pnpm的安裝和使用?

那么我們應(yīng)該如何安裝pnpm呢？

• 官網(wǎng)提供了很多種方式來(lái)安裝pnpm：https://www.pnpm.cn/installation
• 因?yàn)榘惭b過(guò)Node，Node中有npm，所以我們通過(guò)npm安裝即可；

npm install -g pnpm

以下是一個(gè)與 npm 等價(jià)命令的對(duì)照表，幫助你快速入門(mén)：

更多命令和用法可以參考pnpm的官網(wǎng)：https://pnpm.io/zh/

15.4、pnpm的存儲(chǔ)store

在pnpm7.0之前，統(tǒng)一的存儲(chǔ)位置是 ~/.pnpm-score中的；

?

在pnpm7.0之后，統(tǒng)一的存儲(chǔ)位置進(jìn)行了更改：<pnpm home directory>/store

• 在 Linux 上，默認(rèn)是 ~/.local/share/pnpm/store
• 在 Windows 上： %LOCALAPPDATA%/pnpm/store
• 在 macOS 上： ~/Library/pnpm/store

我們可以通過(guò)一些終端命令獲取這個(gè)目錄：獲取當(dāng)前活躍的store目錄?

pnpm store path

————————————————
版權(quán)聲明：本文為CSDN博主「耀南」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-643332.html

到了這里，關(guān)于包管理工具詳解npm 、 yarn 、 cnpm 、 npx 、 pnpm（2023）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！