如何安裝NPM軟件包

深入了解npm！前面章節我們已經學習了Node 和包管理器，甚至安裝了Node 和npm 並熟悉了Node 版本管理器(nvm)。本npm 初學者指南的下一部分將介紹您可能最關心的內容：安裝npm 包。

指南章節

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

一個快速示例

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

 npm install sass

就是這樣！輸入此命令後，npm 將立即開始工作：

幕後發生的情況是，npm 嘗試在npm 包註冊表中查找名為sass 的包。如果找到該包（確實會找到），npm 會將其安裝到項目中自動生成的node_modules文件夾（稍後會詳細介紹）中（位於項目根文件夾中），包括該包運行所需的一切。 （這就是為什麼您看到npm 添加了16 個包並審核了總共17 個npm 包，而不是僅Sass 包本身——它也有依賴項！）

運行安裝命令後，您可能會注意到，您在項目文件夾中沒有看到名為“sass”的任何內容，這與您可能預期的不同。然而，奇怪的是，我們確實在項目文件夾中看到了三個新項目：兩個名為package.json和package-lock.json的JSON 文件，以及一個全新的node_modules文件夾。

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

安裝包時會發生什麼

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

1. 根據需要更新項目中的package.json文件；
2. 更新包含所有技術細節的package-lock.json文件（稱為“鎖文件”）；
3. 安裝實際的包文件——以及原始包可能依賴的任何其他包（在node_modules文件夾內）；以及
4. 運行已安裝包的審核。

讓我們逐一進行介紹。

package.json 和package-lock.json

這兩個JSON 文件協同工作，以確保准確記錄項目中的所有依賴項（以及所有它們的依賴項，以及所有它們的依賴項的依賴項，依此類推）。兩者之間的區別有點技術性，但簡單來說：鎖文件是項目依賴項樹的深入、精確的快照，而package.json是一個高級概述，它還可以包含其他內容。您安裝的主要包可能列在package.json中，但package-lock.json是跟踪整個依賴項樹的位置。

鎖文件也不應該手動更新；只能由npm 更新。因此，請務必避免將鎖文件與package.json文件混淆。

當您與他人共享或協作處理項目時，npm 通過這兩個文件知道項目的來源以及項目中安裝的內容。由於這些信息，它可以精確地在任何其他人的機器上複製該環境。這兩個文件都應該提交到您的Git 倉庫，並作為項目的依賴項藍圖。這樣，當您的團隊中的另一位開發人員克隆倉庫並運行npm install命令時，npm 確切地知道要安裝哪些包，從而使您和您的同事保持同步。

如果您打開package.json ，您不會看到太多內容，但值得一看一下，看看發生了什麼：

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

您可能不會看到確切的版本號（因為自撰寫本文以來該包已更新），但您應該在JSON dependencies對象內看到sass。數字本身（在本例中為1.43.4）指示已安裝的Sass 的特定版本。

作為簡短但重要的旁注：版本號開頭的脫字符(^) 允許npm 安裝對包的次要更新。換句話說，它告訴npm 已安裝的Sass 包必須至少為1.43.4 版本，但可以是任何更高的1.xx 版本，只要它仍在2.0.0 以下即可。 npm 通常在安裝包時選擇最新的穩定版本，但添加此內容是為了允許進行非破壞性更新。這部分稱為“語義版本控制”，它本身就是一個博文主題，但並非npm 獨有。

總之，這就是這兩個JSON 文件。接下來讓我們討論node_modules文件夾。

node_modules

node_modules是所有實際包代碼所在的位置；這是已安裝的Node 包以及使它們運行的所有內容的實際安裝位置。如果您現在在按照說明操作時打開該文件夾，您會找到一個sass 文件夾，但也會找到其他幾個文件夾。

出現其他文件夾的原因是，安裝包時，它可能需要其他包才能正常運行（Sass 顯然需要）。因此，npm 會自動完成查找和安裝所有這些依賴項的工作。正如您可能猜到的那樣，這些依賴項也可能擁有其他自己的依賴項，因此該過程會重複進行，依此類推，直到我們完成對依賴項樹到其最遠分支的爬取，並且我們所需的一切都已安裝（或者直到我們遇到某種錯誤，儘管希望不會）。

因此，項目通常會有數百個甚至更多的node_modules子文件夾，這些文件夾在磁盤空間方面會迅速累積。 node_modules通常會變得非常龐大。

如果您想知道如何將像node_modules這樣的大型文件夾提交到項目的存儲庫，請注意：與JSON 文件不同， node_modules文件夾不應提交到Git ，甚至不應共享。事實上，幾乎每個.gitignore文件（告訴Git 在跟踪文件時應跳過哪些文件的文件）的示例都包含node_modules ，以確保Git 從不接觸或跟踪它。

那麼，您的團隊中的其他人如何獲得這些包呢？他們從命令行運行npm install （或簡寫為npm i ）以直接從源下載依賴項。這樣，無需將大量數據提交到或從原始倉庫中提取。

安裝依賴項時應謹慎

這個龐大的依賴項網絡及其遠親依賴項可能會導致這種情況：某種提供有用服務的實用程序庫可能會被許多其他包採用，而這些包又會被許多其他包使用，直到最終原始代碼最終悄無聲息地安裝在很大一部分站點和應用程序上。

在安裝一個包的過程中，您實際上可能會讓很多其他東西進入，這聽起來可能很奇怪（如果不是非常可怕的話）。這感覺就像邀請一位新朋友參加您的家庭聚會，然後這位朋友帶著20 位不速之客出現。但這並沒有看起來那麼奇怪或可怕，原因如下：

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

當然，在可以安裝和執行任意代碼的任何環境中，謹慎程度都是一個好主意。請不要誤解我的意思。如果我說壞人從未成功利用過此系統，我會撒謊。但是要知道，有很多流程可以防止事情出錯。如有疑問，請堅持使用最流行的包，這樣您就沒事了。

另請注意，npm 會為您運行自動安全審核，這將我們帶到本節的最後一點。

什麼是npm audit？

當我們之前安裝sass 時，我們在終端完成時看到了以下消息：

 <code>found 0 vulnerabilities</code>

但是，您可能會看到一些警告——就像我下面的舊項目一樣。我決定啟動它並在它至少閒置了幾年後運行npm install ( npm i )。讓我們看看它的表現如何：

npm audit 會指出具有已知漏洞的包，該審核會在您安裝包時自動運行。如果您看到這樣的消息，請不要太擔心；許多漏洞，尤其是在“中等”類別中的漏洞，帶來的實際風險非常低，並且可能僅與非常具體的情況相關。 （例如，可能只有包中的一個方法在以特定方式使用時才會使其變得脆弱。）

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

如果將包的版本號提高一個次要版本號不起作用，您可以將--force標誌添加到原始命令中：

 npm audit fix --force

但是，這是一個危險的操作。授予npm “使用強制”權限意味著它現在可以安裝主要版本更新以解決漏洞——這意味著它可能會進行重大更改或引入不兼容性。除非存在npm audit fix無法解決的關鍵漏洞，並且您願意並且能夠在之後花費大量時間進行故障排除（如有必要），否則我不建議這樣做。

關於此主題的最後一點說明：有時您可以通過刪除node_modules並重新運行npm install來修復npm 項目中的一些意外問題。這是npm 的“反復開關”方法，我自己也做過很多次。

接下來的步驟

既然我們已經徹底探索了npm 幕後工作原理的兔子洞，那麼讓我們回到實際操作中來，好嗎？

← 第6 章第8 章→

以上是如何安裝NPM軟件包的詳細內容。更多資訊請關注PHP中文網其他相關文章！