為什么我們要用包？

由于 Node.js 的內(nèi)置模塊僅提供了一些底層的 API，導(dǎo)致在基于內(nèi)置模塊進(jìn)行項(xiàng)目開(kāi)發(fā)的時(shí)，效率很低。
包是基于內(nèi)置模塊封裝出來(lái)的，提供了更高級(jí)、更方便的 API，極大的提高了開(kāi)發(fā)效率。 包和內(nèi)置模塊之間的關(guān)系，類(lèi)似于 jQuery 和 瀏覽器內(nèi)置 API 之間的關(guān)系。(jq是將瀏覽器內(nèi)置的api進(jìn)行了封裝)

包從哪里下載？

國(guó)外有一家 IT 公司，叫做npm, Inc. 這家公司旗下有一個(gè)超級(jí)牛的網(wǎng)站: https://www.npmjs.com ，它是全球最大的包共享平臺(tái)，你可以從這個(gè)網(wǎng)站上搜索到任何你需要的包!

怎么下載包

npm, Inc. 公司提供了一個(gè)包管理工具，我們可以使用這個(gè)包管理工具，從 https://registry.npmjs.org 服務(wù)器把需要的包下載到本地使用。
這個(gè)包管理工具的名字叫做 Node Package Manager（簡(jiǎn)稱(chēng) npm 包管理工具），這個(gè)包管理工具隨著 Node.js 的安裝,包一起被安裝到了用戶(hù)的電腦上。

我們可以在終端中輸入npm -v來(lái)查看npm包管理工具的版本號(hào)

注意 ： 我們的npm版本可能不一樣，大家不要恐慌

npm初體驗(yàn)

格式化時(shí)間moment

使用 npm 包管理工具，在項(xiàng)目中安裝格式化時(shí)間的包 moment

代碼示例:

const moment = require('moment')const dt = moment().format('YYYY-MM-DD')console.log(dt);  // 2022-09-18

注意：這里的YYYY-MM-DD是年月日的符號(hào)標(biāo)識(shí)，在網(wǎng)站https://momentjs.com/docs中可以詳細(xì)的了解.

安裝包命令

如果你想安裝自己需要的包，可以使用以下命令:
npm install xxx 或者 npm i xxx(這個(gè)是簡(jiǎn)寫(xiě)形式，更加的方便快捷)

安裝包后出現(xiàn)的文件

初次裝包完成后，在項(xiàng)目文件夾下多一個(gè)叫做 node_modules 的文件夾和 package-lock.json 的配置文件。

其中：

• node_modules 文件夾用來(lái)存放所有已安裝到項(xiàng)目中的包。require() 導(dǎo)入第三方包時(shí)，就是從這個(gè)目錄中查找并加載包。

• package-lock.json 配置文件用來(lái)記錄 node_modules 目錄下的每一個(gè)包的下載信息，例如包的名字、版本號(hào)、下載地址等。

注意：我們不要手動(dòng)修改 node_modules 或 package-lock.json 文件中的任何代碼，npm 包管理工具會(huì)自動(dòng)維護(hù)它們。

安裝指定版本的包

默認(rèn)情況下，使用 npm install 命令安裝包的時(shí)候，會(huì)自動(dòng)安裝最新版本的包。如果需要安裝指定版本的包，可以在包名之后，通過(guò) @ 符號(hào)指定具體的版本

代碼示例：

解析包版本的含義(語(yǔ)義化版本規(guī)范)

在這里將會(huì)解決大家一直困惑的問(wèn)題，這個(gè)版本號(hào)那一串?dāng)?shù)字到底是啥子意思，在這里黑馬哥良心的教學(xué)讓我直呼好家伙！真心詳細(xì)!!!(好好看，好好學(xué))

包的版本號(hào)是以“點(diǎn)分十進(jìn)制”形式進(jìn)行定義的，總共有三位數(shù)字，例如 2.24.0
其中每一位數(shù)字所代表的的含義如下：

• 第1位數(shù)字：大版本(比如：我們所玩的王者榮耀每過(guò)幾個(gè)月都會(huì)有大版本更新，那么的化第一位數(shù)字就會(huì)發(fā)生變化，大家下次觀察一波)

• 第2位數(shù)字：功能版本(比如：王者榮耀的某個(gè)版本添加了新的功能，又叫小更新)

• 第3位數(shù)字：Bug修復(fù)版本(比如：修復(fù)了閃退的bug，修復(fù)了人物模型的失真bug…)

版本號(hào)提升的規(guī)則：只要前面的版本號(hào)增長(zhǎng)了，則后面的版本號(hào)歸零

包管理配置文件

npm 規(guī)定，在項(xiàng)目根目錄中，必須提供一個(gè)叫做 package.json 的包管理配置文件。用來(lái)記錄與項(xiàng)目有關(guān)的一些配置信息。例如：

• 項(xiàng)目的名稱(chēng)、版本號(hào)、描述等

• 項(xiàng)目中都用到了哪些包

• 哪些包只在開(kāi)發(fā)期間會(huì)用到

• 那些包在開(kāi)發(fā)和部署時(shí)都需要用到

1. 多人協(xié)作問(wèn)題

在這里先給大家舉一個(gè)例子：我們?cè)谶M(jìn)行多人項(xiàng)目開(kāi)發(fā)時(shí)候，我們把自己寫(xiě)的代碼交到碼云上，我
們總不能把node_modules安裝的依賴(lài)也提交上去啊，所以我們不把node_modules提交上去，因?yàn)榈谌侥K的所占的體積過(guò)大，經(jīng)常會(huì)出現(xiàn)我們的代碼總共才1M，第三方包都占30M，所以我們進(jìn)行剔除.

剔除方法:
在.gitignore文件中輸入node_modules即可!

2. 如何記錄項(xiàng)目中安裝了哪些包

在項(xiàng)目根目錄中，創(chuàng)建一個(gè)叫做 package.json 的配置文件，即可用來(lái)記錄項(xiàng)目中安裝了哪些包。從而方便剔除node_modules 目錄之后，在團(tuán)隊(duì)成員之間共享項(xiàng)目的源代碼。

注意：今后在項(xiàng)目開(kāi)發(fā)中，一定要把 node_modules 文件夾，添加到 .gitignore 忽略文件中。

3. 快速創(chuàng)建 package.json

npm 包管理工具提供了一個(gè)快捷命令，可以在執(zhí)行命令時(shí)所處的目錄中，快速創(chuàng)建 package.json 這個(gè)包管理配置文件：npm init -y

注意:
上述命令只能在英文的目錄下成功運(yùn)行！所以，項(xiàng)目文件夾的名稱(chēng)一定要使用英文命名，不要使用中文，不能出現(xiàn)空格。
運(yùn)行 npm install 命令安裝包的時(shí)候，npm 包管理工具會(huì)自動(dòng)把包的名稱(chēng)和版本號(hào)，記錄到 package.json 中。

{   "name": "3",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo "Error: no test specified" && exit 1"   },   "keywords": [],   "author": "",   "license": "ISC",   "dependencies": {     "art-template": "^4.13.2",     "jquery": "^3.6.1",     "moment": "^2.22.2"   }}

4. dependencies 節(jié)點(diǎn)

package.json 文件中，有一個(gè) dependencies 節(jié)點(diǎn)，專(zhuān)門(mén)用來(lái)記錄您使用 npm install 命令安裝了哪些包。例如:我們上面的代碼中的"art-template": "^4.13.2","jquery": "^3.6.1","moment": "^2.22.2"，說(shuō)明了我們安裝了art-template、jquery、moment這三個(gè)包！

5. 一次性安裝所有的包

當(dāng)我們從gitee上拉下來(lái)一個(gè)項(xiàng)目代碼，里面是沒(méi)有node_modules，這就需要我們自己去安裝依賴(lài)，需要先把所有的包下載到項(xiàng)目中，才能將項(xiàng)目運(yùn)行起來(lái)。否則項(xiàng)目就不會(huì)跑起來(lái)！

那我們?cè)趺醋霾拍茏岉?xiàng)目跑起來(lái)呢？別著急，我們只需在終端中運(yùn)行npm install（npm i）就行了！這里運(yùn)行這個(gè)代碼的目的是一次性安裝我們需要的所有依賴(lài)！

6. 卸載包

可以運(yùn)行 npm uninstall 命令，來(lái)卸載指定的包,比如，我們需要卸載moment包，我們可以執(zhí)行代碼：npm uninstall moment
注意：
npm uninstall 命令執(zhí)行成功后，會(huì)把卸載的包，自動(dòng)從 package.json 的 dependencies 中移除掉

7. devDependencies 節(jié)點(diǎn)

如果某些包只在項(xiàng)目開(kāi)發(fā)階段會(huì)用到，在項(xiàng)目上線(xiàn)之后不會(huì)用到，則建議把這些包記錄到 devDependencies 節(jié)點(diǎn)中。
與之對(duì)應(yīng)的，如果某些包在開(kāi)發(fā)和項(xiàng)目上線(xiàn)之后都需要用到，則建議把這些包記錄到dependencies 節(jié)點(diǎn)中

你可以使用如下的命令，將包記錄到 devDependencies 節(jié)點(diǎn)中：

//安裝指定的包，并且記錄到 devDependencies 節(jié)點(diǎn)中npm i 包名 -D// 上部代碼是簡(jiǎn)寫(xiě)形式，下部的代碼是完整寫(xiě)法:npm install 包名 --save-dev

到這里，你就想問(wèn)一個(gè)問(wèn)題，那我怎么知道我安裝的這個(gè)包需不需要放在devDependencies呢？
一般情況下我們?nèi)pm網(wǎng)站中搜索你需要的包，它會(huì)提示你該包是否需要記錄到devDependencies中!

解決下包速度慢的問(wèn)題

1. 為什么包下載速度慢

不難發(fā)現(xiàn)，我們?cè)诎惭b包的時(shí)候它的速度也太慢了吧？為什么會(huì)發(fā)生這種情況呢？

因?yàn)椋涸谑褂?npm 下包的時(shí)候，默認(rèn)從國(guó)外的 https://registry.npmjs.org/ 服務(wù)器進(jìn)行下載，此時(shí)，網(wǎng)絡(luò)數(shù)據(jù)的傳輸需要經(jīng)過(guò)漫長(zhǎng)的海底光纜，因此下包速度會(huì)很慢。

2. 淘寶npm鏡像服務(wù)器

為了解決下載速度慢的問(wèn)題，淘寶在國(guó)內(nèi)搭建了一個(gè)服務(wù)器，專(zhuān)門(mén)把國(guó)外官方服務(wù)器上的包同步到國(guó)內(nèi)的服務(wù)器，然后在國(guó)內(nèi)提供下包的服務(wù)。從而極大的提高了下包的速度。

鏡像（Mirroring）是一種文件存儲(chǔ)形式，一個(gè)磁盤(pán)上的數(shù)據(jù)在另一個(gè)磁盤(pán)上存在一個(gè)完全相同的副本即為鏡像。

3. 切換npm的下包鏡像源

我們已經(jīng)知道了淘寶鏡像可以幫助我們快速的下載包，那么怎么才能切換到淘寶鏡像源呢？
在終端中執(zhí)行以下三步：

• 首先查看我們當(dāng)前的鏡像源:npm config get registry

• 將下包的鏡像源切換為淘寶鏡像源:npm config set registry=https://registry.npmmirror.com/

• 查看鏡像源是否下載成功 : npm config get registry

4. nrm

我們?nèi)绻扇〕Ｒ?guī)的切換鏡像源的方法，未免有點(diǎn)繁瑣,為了更方便的切換下包的鏡像源，我們可以安裝 nrm 這個(gè)小工具，利用 nrm 提供的終端命令，可以快速查看和切換下包的鏡像源。

• 將nrm安裝為全局可用的工具 : npm i nrm -g

• 查看所有的鏡像源 : nrm ls

• 將下載包的鏡像源切換為 taobao 鏡像 : nrm use taobao

顯示這樣的話(huà)，就說(shuō)明我們切換成功啦！

包的分類(lèi)

使用 npm 包管理工具下載的包，共分為兩大類(lèi)，分別是：1. 項(xiàng)目包 2. 全局包

1.項(xiàng)目包

那些被安裝到項(xiàng)目的 node_modules 目錄中的包，都是項(xiàng)目包。

項(xiàng)目包又分為兩類(lèi)，分別是：
開(kāi)發(fā)依賴(lài)包（被記錄到 devDependencies 節(jié)點(diǎn)中的包，只在開(kāi)發(fā)期間會(huì)用到）
核心依賴(lài)包（被記錄到 dependencies 節(jié)點(diǎn)中的包，在開(kāi)發(fā)期間和項(xiàng)目上線(xiàn)之后都會(huì)用到）

2.全局包

在執(zhí)行 npm install 命令時(shí)，如果提供了 -g 參數(shù)，則會(huì)把包安裝為全局包。

全局包會(huì)被安裝到 C:Users用戶(hù)目錄AppDataRoamingnpmnode_modules 目錄下。

注意：

• 只有工具性質(zhì)的包，才有全局安裝的必要性。因?yàn)樗鼈兲峁┝撕糜玫慕K端命令。

• 判斷某個(gè)包是否需要全局安裝后才能使用，可以參考官方提供的使用說(shuō)明即可。

3.將md文件轉(zhuǎn)為html

i5ting_toc 是一個(gè)可以把 md 文檔轉(zhuǎn)為 html 頁(yè)面的小工具(這個(gè)真的是嘎嘎好用，比如，如果我們?cè)诰W(wǎng)上找學(xué)習(xí)資源的時(shí)候，部分會(huì)把筆記記為md文檔，我們使用瀏覽器打開(kāi)md文檔布局特別的難以接受~)，使用步驟如下：

# 將 i5ting_toc 安裝為全局包 npm i -g i5ting_toc # 調(diào)用 i5ting_toc ,輕松實(shí)現(xiàn) md 轉(zhuǎn) html 的功能 i5ting_toc -f 要轉(zhuǎn)的md文件路徑 -o

上述代碼中-o的意思是，我們將在默認(rèn)的瀏覽器中打開(kāi)這個(gè)轉(zhuǎn)化后的md文件

規(guī)范的包結(jié)構(gòu)

在清楚了包的概念、以及如何下載和使用包之后，接下來(lái)，我們深入了解一下包的內(nèi)部結(jié)構(gòu)。

一個(gè)規(guī)范的包，它的組成結(jié)構(gòu)，必須符合以下 3 點(diǎn)要求：

• 包必須以單獨(dú)的目錄而存在

• 包的頂級(jí)目錄下要必須包含 package.json 這個(gè)包管理配置文件

• package.json 中必須包含 name，version，main 這三個(gè)屬性，分別代表包的名字、版本號(hào)、包的入口

舉例：

小結(jié)

?本篇文章，詳細(xì)的解析了node中包的概念和npm，npm在日常開(kāi)發(fā)中根本離不開(kāi)，在框架中，也要使用npm去安裝架構(gòu)，所以npm的學(xué)習(xí)必須是要透徹的，不要糊弄過(guò)去