深入了解 npm！前面章節(jié)我們已經(jīng)學(xué)習(xí)了 Node 和包管理器，甚至安裝了 Node 和 npm 并熟悉了 Node 版本管理器 (nvm)。本 npm 初學(xué)者指南的下一部分將介紹您可能最關(guān)心的內(nèi)容：安裝 npm 包。

指南章節(jié)

1. 本指南面向誰(shuí)？
2. “npm” 到底是什么意思？
3. 命令行是什么？
4. Node 是什么？
5. 包管理器是什么？
6. 如何安裝 npm？
7. 如何安裝 npm 包？(您當(dāng)前位置！)
8. npm 命令是什么？
9. 如何安裝現(xiàn)有的 npm 項(xiàng)目？

一個(gè)快速示例

我們可以使用 npm install 命令（或簡(jiǎn)寫為 npm i）以及要添加到項(xiàng)目的包名稱來(lái)安裝我們的第一個(gè)包。例如，Sass 的 Node 包簡(jiǎn)稱為“sass”，這意味著我們可以像這樣將其添加到項(xiàng)目中（請(qǐng)確保您首先在一個(gè)為這個(gè)小項(xiàng)目創(chuàng)建的新文件夾中）：

npm install sass

就是這樣！輸入此命令后，npm 將立即開(kāi)始工作：

幕后發(fā)生的情況是，npm 嘗試在 npm 包注冊(cè)表中查找名為 sass 的包。如果找到該包（確實(shí)會(huì)找到），npm 會(huì)將其安裝到項(xiàng)目中自動(dòng)生成的 node_modules 文件夾（稍后會(huì)詳細(xì)介紹）中（位于項(xiàng)目根文件夾中），包括該包運(yùn)行所需的一切。（這就是為什么您看到 npm 添加了 16 個(gè)包并審核了總共 17 個(gè) npm 包，而不是僅 Sass 包本身——它也有依賴項(xiàng)！）

運(yùn)行安裝命令后，您可能會(huì)注意到，您在項(xiàng)目文件夾中沒(méi)有看到名為“sass”的任何內(nèi)容，這與您可能預(yù)期的不同。然而，奇怪的是，我們確實(shí)在項(xiàng)目文件夾中看到了三個(gè)新項(xiàng)目：兩個(gè)名為 package.json 和 package-lock.json 的 JSON 文件，以及一個(gè)全新的 node_modules 文件夾。

這些是什么？我們要求 npm 安裝 Sass，而不是所有這些東西。這不是 Sass 的一部分……對(duì)吧？是的，這是正確的，但是為什么在項(xiàng)目文件夾中生成這些新項(xiàng)目有一個(gè)很好的解釋。讓我們看看剛剛發(fā)生了什么。

安裝包時(shí)會(huì)發(fā)生什么

安裝（或卸載或更新）包時(shí)，npm 會(huì)執(zhí)行以下四件事中的大部分甚至全部：

1. 根據(jù)需要更新項(xiàng)目中的 package.json 文件；
2. 更新包含所有技術(shù)細(xì)節(jié)的 package-lock.json 文件（稱為“鎖文件”）；
3. 安裝實(shí)際的包文件——以及原始包可能依賴的任何其他包（在 node_modules 文件夾內(nèi)）；以及
4. 運(yùn)行已安裝包的審核。

讓我們逐一進(jìn)行介紹。

package.json 和 package-lock.json

這兩個(gè) JSON 文件協(xié)同工作，以確保準(zhǔn)確記錄項(xiàng)目中的所有依賴項(xiàng)（以及所有它們的依賴項(xiàng)，以及所有它們的依賴項(xiàng)的依賴項(xiàng)，依此類推）。兩者之間的區(qū)別有點(diǎn)技術(shù)性，但簡(jiǎn)單來(lái)說(shuō)：鎖文件是項(xiàng)目依賴項(xiàng)樹(shù)的深入、精確的快照，而 package.json 是一個(gè)高級(jí)概述，它還可以包含其他內(nèi)容。您安裝的主要包可能列在 package.json 中，但 package-lock.json 是跟蹤整個(gè)依賴項(xiàng)樹(shù)的位置。

鎖文件也不應(yīng)該手動(dòng)更新；只能由 npm 更新。因此，請(qǐng)務(wù)必避免將鎖文件與 package.json 文件混淆。

當(dāng)您與他人共享或協(xié)作處理項(xiàng)目時(shí)，npm 通過(guò)這兩個(gè)文件知道項(xiàng)目的來(lái)源以及項(xiàng)目中安裝的內(nèi)容。由于這些信息，它可以精確地在任何其他人的機(jī)器上復(fù)制該環(huán)境。這兩個(gè)文件都應(yīng)該提交到您的 Git 倉(cāng)庫(kù)，并作為項(xiàng)目的依賴項(xiàng)藍(lán)圖。這樣，當(dāng)您的團(tuán)隊(duì)中的另一位開(kāi)發(fā)人員克隆倉(cāng)庫(kù)并運(yùn)行 npm install 命令時(shí)，npm 確切地知道要安裝哪些包，從而使您和您的同事保持同步。

如果您打開(kāi) package.json，您不會(huì)看到太多內(nèi)容，但值得一看一下，看看發(fā)生了什么：

{
  "dependencies": {
    "sass": "^1.43.4"
  }
}

您可能不會(huì)看到確切的版本號(hào)（因?yàn)樽宰珜懕疚囊詠?lái)該包已更新），但您應(yīng)該在 JSON dependencies 對(duì)象內(nèi)看到 sass。數(shù)字本身（在本例中為 1.43.4）指示已安裝的 Sass 的特定版本。

作為簡(jiǎn)短但重要的旁注：版本號(hào)開(kāi)頭的脫字符 (^) 允許 npm 安裝對(duì)包的次要更新。換句話說(shuō)，它告訴 npm 已安裝的 Sass 包必須至少為 1.43.4 版本，但可以是任何更高的 1.x.x 版本，只要它仍在 2.0.0 以下即可。npm 通常在安裝包時(shí)選擇最新的穩(wěn)定版本，但添加此內(nèi)容是為了允許進(jìn)行非破壞性更新。這部分稱為“語(yǔ)義版本控制”，它本身就是一個(gè)博文主題，但并非 npm 獨(dú)有。

總之，這就是這兩個(gè) JSON 文件。接下來(lái)讓我們討論 node_modules 文件夾。

node_modules

node_modules 是所有實(shí)際包代碼所在的位置；這是已安裝的 Node 包以及使它們運(yùn)行的所有內(nèi)容的實(shí)際安裝位置。如果您現(xiàn)在在按照說(shuō)明操作時(shí)打開(kāi)該文件夾，您會(huì)找到一個(gè) sass 文件夾，但也會(huì)找到其他幾個(gè)文件夾。

出現(xiàn)其他文件夾的原因是，安裝包時(shí)，它可能需要其他包才能正常運(yùn)行（Sass 顯然需要）。因此，npm 會(huì)自動(dòng)完成查找和安裝所有這些依賴項(xiàng)的工作。正如您可能猜到的那樣，這些依賴項(xiàng)也可能擁有其他自己的依賴項(xiàng)，因此該過(guò)程會(huì)重復(fù)進(jìn)行，依此類推，直到我們完成對(duì)依賴項(xiàng)樹(shù)到其最遠(yuǎn)分支的爬取，并且我們所需的一切都已安裝（或者直到我們遇到某種錯(cuò)誤，盡管希望不會(huì)）。

因此，項(xiàng)目通常會(huì)有數(shù)百個(gè)甚至更多的 node_modules 子文件夾，這些文件夾在磁盤空間方面會(huì)迅速累積。node_modules 通常會(huì)變得非常龐大。

如果您想知道如何將像 node_modules 這樣的大型文件夾提交到項(xiàng)目的存儲(chǔ)庫(kù)，請(qǐng)注意：與 JSON 文件不同，node_modules 文件夾不應(yīng)提交到 Git，甚至不應(yīng)共享。事實(shí)上，幾乎每個(gè) .gitignore 文件（告訴 Git 在跟蹤文件時(shí)應(yīng)跳過(guò)哪些文件的文件）的示例都包含 node_modules，以確保 Git 從不接觸或跟蹤它。

那么，您的團(tuán)隊(duì)中的其他人如何獲得這些包呢？他們從命令行運(yùn)行 npm install（或簡(jiǎn)寫為 npm i）以直接從源下載依賴項(xiàng)。這樣，無(wú)需將大量數(shù)據(jù)提交到或從原始倉(cāng)庫(kù)中提取。

安裝依賴項(xiàng)時(shí)應(yīng)謹(jǐn)慎

這個(gè)龐大的依賴項(xiàng)網(wǎng)絡(luò)及其遠(yuǎn)親依賴項(xiàng)可能會(huì)導(dǎo)致這種情況：某種提供有用服務(wù)的實(shí)用程序庫(kù)可能會(huì)被許多其他包采用，而這些包又會(huì)被許多其他包使用，直到最終原始代碼最終悄無(wú)聲息地安裝在很大一部分站點(diǎn)和應(yīng)用程序上。

在安裝一個(gè)包的過(guò)程中，您實(shí)際上可能會(huì)讓很多其他東西進(jìn)入，這聽(tīng)起來(lái)可能很奇怪（如果不是非常可怕的話）。這感覺(jué)就像邀請(qǐng)一位新朋友參加您的家庭聚會(huì)，然后這位朋友帶著 20 位不速之客出現(xiàn)。但這并沒(méi)有看起來(lái)那么奇怪或可怕，原因如下：

1. 大多數(shù) npm 包都是開(kāi)源的。您和任何其他人都可以輕松查看內(nèi)部工作原理，并確切了解包在做什么。您還可以查看注冊(cè)表 (npmjs.com) 上的包，以查看它安裝了多少次、上次更新時(shí)間以及其他相關(guān)信息。如果某個(gè)包相當(dāng)流行，您可以合理地確定它是安全的。
2. 存在一個(gè)龐大的功能世界，許多項(xiàng)目都需要這些功能。例如，考慮日期格式化、處理 HTTP 請(qǐng)求和響應(yīng)、節(jié)流、防抖或動(dòng)畫(huà)。每次在新項(xiàng)目中使用這些內(nèi)容時(shí)，重新發(fā)明輪子并手動(dòng)編碼這些內(nèi)容是沒(méi)有意義的。
3. 安裝包與在手機(jī)上安裝應(yīng)用程序或在 WordPress 網(wǎng)站上安裝插件并沒(méi)有什么不同。不同之處在于，我們不像處理包那樣能夠深入了解這些應(yīng)用程序和插件的內(nèi)部工作原理，以及這些應(yīng)用程序和插件可能依賴的其他內(nèi)容。很有可能它們也會(huì)以某種方式引入許多較小的包。

當(dāng)然，在可以安裝和執(zhí)行任意代碼的任何環(huán)境中，謹(jǐn)慎程度都是一個(gè)好主意。請(qǐng)不要誤解我的意思。如果我說(shuō)壞人從未成功利用過(guò)此系統(tǒng)，我會(huì)撒謊。但是要知道，有很多流程可以防止事情出錯(cuò)。如有疑問(wèn)，請(qǐng)堅(jiān)持使用最流行的包，這樣您就沒(méi)事了。

另請(qǐng)注意，npm 會(huì)為您運(yùn)行自動(dòng)安全審核，這將我們帶到本節(jié)的最后一點(diǎn)。

什么是 npm audit？

當(dāng)我們之前安裝 sass 時(shí)，我們?cè)诮K端完成時(shí)看到了以下消息：

<code>found 0 vulnerabilities</code>

但是，您可能會(huì)看到一些警告——就像我下面的舊項(xiàng)目一樣。我決定啟動(dòng)它并在它至少閑置了幾年后運(yùn)行 npm install (npm i)。讓我們看看它的表現(xiàn)如何：

npm audit 會(huì)指出具有已知漏洞的包，該審核會(huì)在您安裝包時(shí)自動(dòng)運(yùn)行。如果您看到這樣的消息，請(qǐng)不要太擔(dān)心；許多漏洞，尤其是在“中等”類別中的漏洞，帶來(lái)的實(shí)際風(fēng)險(xiǎn)非常低，并且可能僅與非常具體的情況相關(guān)。（例如，可能只有包中的一個(gè)方法在以特定方式使用時(shí)才會(huì)使其變得脆弱。）

盡管如此，最好還是解決我們所能解決的問(wèn)題，這就是 npm audit fix 命令的作用。在末尾添加 fix 會(huì)告訴 npm 繼續(xù)并更新具有某種已知漏洞的任何包的新的次要版本。“次要版本”部分很重要；次要版本不應(yīng)包含重大更改，而應(yīng)僅包含更新。這意味著應(yīng)該安全地以這種方式運(yùn)行更新，而不會(huì)出現(xiàn)破壞項(xiàng)目風(fēng)險(xiǎn)。

如果將包的版本號(hào)提高一個(gè)次要版本號(hào)不起作用，您可以將 --force 標(biāo)志添加到原始命令中：

npm audit fix --force

但是，這是一個(gè)危險(xiǎn)的操作。授予 npm “使用強(qiáng)制”權(quán)限意味著它現(xiàn)在可以安裝主要版本更新以解決漏洞——這意味著它可能會(huì)進(jìn)行重大更改或引入不兼容性。除非存在 npm audit fix 無(wú)法解決的關(guān)鍵漏洞，并且您愿意并且能夠在之后花費(fèi)大量時(shí)間進(jìn)行故障排除（如有必要），否則我不建議這樣做。

關(guān)于此主題的最后一點(diǎn)說(shuō)明：有時(shí)您可以通過(guò)刪除 node_modules 并重新運(yùn)行 npm install 來(lái)修復(fù) npm 項(xiàng)目中的一些意外問(wèn)題。這是 npm 的“反復(fù)開(kāi)關(guān)”方法，我自己也做過(guò)很多次。

接下來(lái)的步驟

既然我們已經(jīng)徹底探索了 npm 幕后工作原理的兔子洞，那么讓我們回到實(shí)際操作中來(lái)，好嗎？

← 第 6 章 第 8 章 →

以上是如何安裝NPM軟件包的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！