一、概念介紹

**1.1 包是什么 **
『包』英文單詞是 package ，代表了一組特定功能的源碼集合
**1.2 包管理工具 **
管理『包』的應(yīng)用軟件，可以對(duì)「包」進(jìn)行 下載安裝 ， 更新 ， 刪除 ， 上傳 等操作
借助包管理工具，可以快速開發(fā)項(xiàng)目，提升開發(fā)效率
包管理工具是一個(gè)通用的概念，很多編程語(yǔ)言都有包管理工具，所以 掌握好包管理工具非常重要
**1.3 常用的包管理工具 **
下面列舉了前端常用的包管理工具
npm
yarn
cnpm

二、npm

npm 全稱 Node Package Manager ，翻譯為中文意思是『Node 的包管理工具』
npm 是 node.js 官方內(nèi)置的包管理工具，是 必須要掌握住的工具

2.1 npm 的安裝

node.js 在安裝時(shí)會(huì) 自動(dòng)安裝 npm ，所以如果你已經(jīng)安裝了 node.js，可以直接使用 npm
可以通過(guò) npm -v 查看版本號(hào)測(cè)試，如果顯示版本號(hào)說(shuō)明安裝成功，反之安裝失敗

2.2 npm 基本使用

2.2.1 初始化

創(chuàng)建一個(gè)空目錄，然后以此目錄作為工作目錄 啟動(dòng)命令行工具 ，執(zhí)行 npm init
npm init 命令的作用是將文件夾初始化為一個(gè)『包』， 交互式創(chuàng)建 package.json 文件
package.json 是包的配置文件，每個(gè)包都必須要有 package.json
package.json 內(nèi)容示例：

{"name": "01_npm","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}

屬性翻譯

{"name": "1-npm", #包的名字"version": "1.0.0", #包的版本"description": "", #包的描述"main": "index.js", #包的入口文件"scripts": { #腳本配置"test": "echo \"Error: no test specified\" && exit 1"},"author": "", #作者"license": "ISC" #開源證書
}

初始化的過(guò)程中還有一些注意事項(xiàng)：

1. package name ( 包名 ) 不能使用中文、大寫，默認(rèn)值是 文件夾的名稱 ，所以文件夾名稱也不
   能使用中文和大寫
2. version ( 版本號(hào) )要求 x.x.x 的形式定義， x 必須是數(shù)字，默認(rèn)值是 1.0.0
3. ISC 證書與 MIT 證書功能上是相同的，關(guān)于開源證書擴(kuò)展閱讀（如何選擇開源許可證）
4. package.json 可以手動(dòng)創(chuàng)建與修改
5. 使用 npm init -y 或者 npm init --yes 極速創(chuàng)建 package.json

2.2.2 搜索包

搜索包的方式有兩種

1. 命令行 『npm s/search 關(guān)鍵字』
2. 網(wǎng)站搜索 網(wǎng)址是 https://www.npmjs.com/

**2.2.3 下載安裝包 **

我們可以通過(guò) npm install 和 npm i 命令安裝包

# 格式
npm install <包名>
npm i <包名>
# 示例
npm install uniq
npm i uniq

運(yùn)行之后文件夾下會(huì)增加兩個(gè)資源

• node_modules 文件夾 存放下載的包
• package-lock.json 包的鎖文件 ，用來(lái)鎖定包的版本

安裝 uniq 之后， uniq 就是當(dāng)前這個(gè)包的一個(gè) 依賴包 ，有時(shí)會(huì)簡(jiǎn)稱為 依賴
比如我們創(chuàng)建一個(gè)包名字為 A，A 中安裝了包名字是 B，我們就說(shuō) B 是 A 的一個(gè)依賴包 ，也會(huì)說(shuō)
A 依賴 B

2.2.4 require 導(dǎo)入 npm 包基本流程

1. 在當(dāng)前文件夾下 node_modules 中尋找同名的文件夾
2. 在上級(jí)目錄中下的 node_modules 中尋找同名的文件夾，直至找到磁盤根目錄

2.3 生產(chǎn)環(huán)境與開發(fā)環(huán)境

開發(fā)環(huán)境是程序員 專門用來(lái)寫代碼 的環(huán)境，一般是指程序員的電腦，開發(fā)環(huán)境的項(xiàng)目一般 只能程序員自己訪問(wèn)
生產(chǎn)環(huán)境是項(xiàng)目 代碼正式運(yùn)行 的環(huán)境，一般是指正式的服務(wù)器電腦，生產(chǎn)環(huán)境的項(xiàng)目一般 每個(gè)客戶都可以訪問(wèn)

2.4 生產(chǎn)依賴與開發(fā)依賴

我們可以在安裝時(shí)設(shè)置選項(xiàng)來(lái)區(qū)分 依賴的類型 ，目前分為兩類：

類型	命令	補(bǔ)充
生產(chǎn)依賴	npm i -S uniq
npm i --save uniq	-S 等效于 --save,-S 是默認(rèn)選項(xiàng)
包信息保存在 package.json 中 dependencies屬性
開發(fā)依賴	npm i -D less
npm i --save-dev less	-D 等效于 --save-dev
包信息保存在 package.json 中 devDependencies 屬性

2.5 全局安裝

我們可以執(zhí)行安裝選項(xiàng) -g 進(jìn)行全局安裝

//該命令的作用是 自動(dòng)重啟 node 應(yīng)用程序
npm i -g nodemon  

全局安裝完成之后就可以在命令行的任何位置運(yùn)行 nodemon 命令
nodemon 可以 自動(dòng)重啟 node 應(yīng)用程序

說(shuō)明：

• 全局安裝的命令不受工作目錄位置影響，調(diào)用方式也不再是 require 引入，而是通過(guò)暴露的方法使用
• 可以通過(guò) npm root -g 可以查看全局安裝包的位置
• 不是所有的包都適合全局安裝 ， 只有全局類的工具才適合，可以通過(guò) 查看包的官方文檔來(lái)確定安裝方式 ，這里先不必太糾結(jié)

2.5.1 環(huán)境變量 Path

Path 是操作系統(tǒng)的一個(gè)環(huán)境變量，可以設(shè)置一些文件夾的路徑，在當(dāng)前工作目錄下找不到可執(zhí)行文件
時(shí)，就會(huì)在環(huán)境變量 Path 的目錄中挨個(gè)的查找，如果找到則執(zhí)行，如果沒(méi)有找到就會(huì)報(bào)錯(cuò)

補(bǔ)充說(shuō)明：
如果希望某個(gè)程序在任何工作目錄下都能正常運(yùn)行，就應(yīng)該將該程序的所在目錄配置到環(huán)境
變量 Path 中
windows 下查找命令的所在位置
cmd 命令行 中執(zhí)行 where nodemon
powershell命令行 執(zhí)行 get-command nodemon

2.6 安裝包依賴

在項(xiàng)目協(xié)作中有一個(gè)常用的命令就是 npm i ，通過(guò)該命令可以依據(jù) package.json 和 package.lock.json 的依賴聲明安裝項(xiàng)目依賴

npm i
npm install

node_modules 文件夾大多數(shù)情況都不會(huì)存入版本庫(kù)

2.7 安裝指定版本的包

項(xiàng)目中可能會(huì)遇到版本不匹配的情況，有時(shí)就需要安裝指定版本的包，可以使用下面的命令的

## 格式
npm i <包名@版本號(hào)>
## 示例
npm i jquery@1.11.2

2.8 刪除依賴

項(xiàng)目中可能需要?jiǎng)h除某些不需要的包，可以使用下面的命令

## 局部刪除
npm remove uniq
npm r uniq
## 全局刪除
npm remove -g nodemon

2.9 配置命令別名

通過(guò)配置命令別名可以更簡(jiǎn)單的執(zhí)行命令
配置 package.json 中的 scripts 屬性

{"scripts": {"server": "node ./index.js","start": "node ./index.js"},
}

配置完成之后，可以使用別名執(zhí)行命令

npm run server
npm run start

不過(guò) start 別名比較特別，使用時(shí)可以省略 run

npm start

補(bǔ)充說(shuō)明：

• npm start 是項(xiàng)目中常用的一個(gè)命令，一般用來(lái)啟動(dòng)項(xiàng)目
• npm run 有自動(dòng)向上級(jí)目錄查找的特性，跟 require 函數(shù)也一樣
• 對(duì)于陌生的項(xiàng)目，我們可以通過(guò)查看 scripts 屬性來(lái)參考項(xiàng)目的一些操作

三、cnpm

3.1 介紹

cnpm 是一個(gè)淘寶構(gòu)建的 npmjs.com 的完整鏡像，也稱為『淘寶鏡像』，網(wǎng)址鏈接** **
cnpm 服務(wù)部署在國(guó)內(nèi) 阿里云服務(wù)器上 ， 可以提高包的下載速度
官方也提供了一個(gè)全局工具包 cnpm ，操作命令與 npm 大體相同

3.2 安裝

我們可以通過(guò) npm 來(lái)安裝 cnpm 工具

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

3.3 操作命令

功能	命令
初始化	cnpm init/ cnpm init -y

| 安裝包 | cnpm i uniq
cnpm i -S uniq
cnpm i -D uniq
cnpm i -g nodemon |
| 安裝項(xiàng)目依賴 | cnpm i |
| 刪除 | cnpm r uniq |

3.4 npm 配置淘寶鏡像

用 npm 也可以使用淘寶鏡像，配置的方式有兩種

• 直接配置
• 工具配置

3.4.1 直接配置

執(zhí)行如下命令即可完成配置

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

3.4.2 工具配置

使用 nrm 配置 npm 的鏡像地址 npm registry manager

1. 安裝 nrm

npm i -g nrm

2. 修改鏡像

nrm use taobao

3. 檢查是否配置成功（選做）

npm config list

檢查 registry 地址是否為 **https://registry.npmmirror.com/ **, 如果 是 則表明成功

補(bǔ)充說(shuō)明：

1. 建議使用第二種方式 進(jìn)行鏡像配置，因?yàn)楹罄m(xù)修改起來(lái)會(huì)比較方便
2. 雖然 cnpm 可以提高速度，但是 npm 也可以通過(guò)淘寶鏡像進(jìn)行加速，所以 npm 的使用率還
   是高于 cnpm

四、yarn

4.1 yarn介紹

yarn 是由 Facebook 在 2016 年推出的新的 Javascript 包管理工具，官方網(wǎng)址：https://yarnpkg.com/

4.2 yarn 特點(diǎn)

yarn 官方宣稱的一些特點(diǎn)

• 速度超快：yarn 緩存了每個(gè)下載過(guò)的包，所以再次使用時(shí)無(wú)需重復(fù)下載。 同時(shí)利用并行下載以最大化資源利用率，因此安裝速度更快
• 超級(jí)安全：在執(zhí)行代碼之前，yarn 會(huì)通過(guò)算法校驗(yàn)每個(gè)安裝包的完整性
• 超級(jí)可靠：使用詳細(xì)、簡(jiǎn)潔的鎖文件格式和明確的安裝算法，yarn 能夠保證在不同系統(tǒng)上無(wú)差異的工作

4.3 yarn 安裝

我們可以使用 npm 安裝 yarn

npm i -g yarn

4.4 yarn 常用命令

功能	命令
初始化	yarn init / yarn init -y

| 安裝包 | yarn add uniq 生產(chǎn)依賴
yarn add less --dev 開發(fā)依賴
yarn global add nodemon 全局安裝 |
| 刪除包 | yarn remove uniq 刪除項(xiàng)目依賴包
yarn global remove nodemon 全局刪除包 |
| 安裝項(xiàng)目依賴 | yarn |
| 運(yùn)行命令別名 | yarn <別名> # 不需要添加 run |

思考題：
這里有個(gè)小問(wèn)題就是 全局安裝的包不可用 ，yarn 全局安裝包的位置可以通過(guò) yarn global bin
來(lái)查看，那你有沒(méi)有辦法使 yarn 全局安裝的包能夠正常運(yùn)行？

4.5 yarn 配置淘寶鏡像

可以通過(guò)如下命令配置淘寶鏡像

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

可以通過(guò) yarn config list 查看 yarn 的配置項(xiàng)

**4.6 npm 和 yarn 選擇 **

大家可以根據(jù)不同的場(chǎng)景進(jìn)行選擇

1. 個(gè)人項(xiàng)目: 如果是個(gè)人項(xiàng)目， 哪個(gè)工具都可以 ，可以根據(jù)自己的喜好來(lái)選擇
2. 公司項(xiàng)目: 如果是公司要根據(jù)項(xiàng)目代碼來(lái)選擇，可以 通過(guò)鎖文件判斷 項(xiàng)目的包管理工具
   1. npm 的鎖文件為 package-lock.json
   2. yarn 的鎖文件為 yarn.lock

包管理工具 不要混著用，切記，切記，切記

五、管理發(fā)布包

5.1 創(chuàng)建與發(fā)布

我們可以將自己開發(fā)的工具包發(fā)布到 npm 服務(wù)上，方便自己和其他開發(fā)者使用，操作步驟如下：

1. 創(chuàng)建文件夾，并創(chuàng)建文件 index.js， 在文件中聲明函數(shù)，使用 module.exports 暴露
2. npm 初始化工具包，package.json 填寫包的信息 (包的名字是唯一的)
3. 注冊(cè)賬號(hào) **https://www.npmjs.com/signup **
4. 激活賬號(hào) （ 一定要激活賬號(hào) ）
5. 修改為官方的官方鏡像 (命令行中運(yùn)行 nrm use npm )
6. 命令行下 npm login 填寫相關(guān)用戶信息
7. 命令行下 npm publish 提交包 👌

5.2 更新包

后續(xù)可以對(duì)自己發(fā)布的包進(jìn)行更新，操作步驟如下

1. 更新包中的代碼
2. 測(cè)試代碼是否可用
3. 修改 package.json 中的版本號(hào)
4. 發(fā)布更新

npm publish

5.3 刪除包

執(zhí)行如下命令刪除包

npm unpublic --force

刪除包需要滿足一定的條件，**https://docs.npmjs.com/policies/unpublish **

• 你是包的作者
• 發(fā)布小于 24 小時(shí)
• 大于 24 小時(shí)后，沒(méi)有其他包依賴，并且每周小于 300 下載量，并且只有一個(gè)維護(hù)者

六、擴(kuò)展內(nèi)容

在很多語(yǔ)言中都有包管理工具，比如：

語(yǔ)言	包管理工具
PHP	composer
Python	pip
Java	maven
Go	go mod
Javascript	npm/yarn/cnpm/other
Ruby	rubyGems

除了編程語(yǔ)言領(lǐng)域有包管理工具之外，操作系統(tǒng)層面也存在包管理工具，不過(guò)這個(gè)包指的是『 軟件包 』

操作系統(tǒng)	包管理工具	網(wǎng)址
Centos	yum	https://packages.debian.org/stable/
Ubuntu	apt	https://packages.ubuntu.com/
MacOS	homebrew	https://brew.sh/
Windows	chocolatey	https://chocolatey.org/

七、nvm

7.1 介紹

nvm 全稱 Node Version Manager 顧名思義它是用來(lái)管理 node 版本的工具，方便切換不同版本的
Node.js

7.2 使用

nvm 的使用非常的簡(jiǎn)單，跟 npm 的使用方法類似

7.2.1 下載安裝

首先先下載 nvm，下載地址 https://github.com/coreybutler/nvm-windows/releases，
選擇 nvm-setup.exe 下載即可

7.2.2 常用命令

命令	說(shuō)明
nvm list abailable	顯示所有可以下載的 Node.js 版本
nvm list	顯示已安裝的版本
nvm install 18.12.1	安裝 18.12.1 版本的 Node.js
nvm uninstall 18.12.1	刪除某個(gè)版本的 Node.js
nvm use 18.12.1	切換 18.12.1 的 Node.js