在本npm 指南中，我們已經(jīng)對(duì)npm 有了大致的了解——它代表Node 包管理器。在此過(guò)程中，我們討論了命令行的重要性以及它如何與npm 一起使用。

我們還專門研究了npm 中的“n”——Node——並了解到Node 非常類似於我們?cè)跒g覽器中運(yùn)行網(wǎng)站的JavaScript 代碼。事實(shí)上，Node就是JavaScript；它只是在瀏覽器外部運(yùn)行，並且能夠執(zhí)行與其基於瀏覽器的對(duì)應(yīng)物不同的操作。

指南章節(jié)

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

“包”的含義

現(xiàn)在讓我們關(guān)注npm 中的最後兩個(gè)字母，即“包管理器”部分。為了充分理解npm 是什麼，我們需要知道包管理器是什麼。因此，很自然地，為了理解那，我們需要了解“包”到底是什麼。

“包”是一個(gè)總稱，用於您添加到項(xiàng)目中並以某種方式使用的任何外部代碼文件。也許您過(guò)去曾在項(xiàng)目中使用過(guò)jQuery、Bootstrap 或Axios。這些是包的常見(jiàn)示例。

我們稱它們?yōu)椤鞍保驗(yàn)樗鼈円选按虬眮K準(zhǔn)備好使用。某些語(yǔ)言稱它們?yōu)槠渌Q（例如，Ruby 稱它們?yōu)椤癵em”），但概念相同。為了避免過(guò)度簡(jiǎn)化，包是您沒(méi)有編寫(xiě)但從某些公共來(lái)源獲取以用於項(xiàng)目的代碼。您知道的，第三方代碼。

或者，如果您更喜歡使用助記符的音樂(lè)模仿：

?當(dāng)您選擇代碼時(shí)?不是您的，但您使用?這是一個(gè)包?當(dāng)您安裝的東西時(shí)?您導(dǎo)入並調(diào)用， ?這是一個(gè)包

包也經(jīng)常被稱為“依賴項(xiàng)”，因?yàn)槟帉?xiě)的代碼依賴於它們的存在。例如，使用jQuery 的$ 編寫(xiě)的代碼如果jQuery 本身沒(méi)有加載，將無(wú)法正常工作。 （因此，包管理器有時(shí)也稱為“依賴項(xiàng)管理器”。）

就包含的代碼量而言，包的大小可能會(huì)有所不同。一個(gè)包可能執(zhí)行一些巨大的操作，從而改變您編寫(xiě)整個(gè)項(xiàng)目的方式（例如整個(gè)框架），或者它可能執(zhí)行一些非常小的、專注的操作，您只需在需要的地方添加即可（例如小部件或特定任務(wù)的輔助程序）。

不使用包管理器使用包

如果您過(guò)去使用過(guò)包，很可能您只是在HTML 中使用腳本標(biāo)籤將其應(yīng)用於從外部URL（理想情況下是從CDN）提取的腳本標(biāo)籤。以下是您如何在網(wǎng)站的HTML 中包含jQuery 的方法：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

另一種方法是下載包的副本，將其添加到項(xiàng)目的文件夾中，然後鏈接到它，如下所示：

<script src="./js/jquery-3.6.0.min.js"></script>

包管理器解決的問(wèn)題

多年來(lái)，這兩種方法都運(yùn)行良好。它很簡(jiǎn)單。它很乾淨(jìng)。就包而言，它通?？梢宰屇霸O(shè)置並忘記”。那麼為什麼您還需要其他東西呢？

您可以想像，對(duì)於可以方便地使用公共交通工具或不需要長(zhǎng)途旅行的人來(lái)說(shuō)，擁有汽車可能看起來(lái)並不吸引人。 （這將與包管理器討論相關(guān)，我保證。堅(jiān)持下去。）

如果您方便地使用高效的公共交通工具，那麼為一臺(tái)大型機(jī)器支付高昂的價(jià)格，您必須將其存儲(chǔ)在某個(gè)地方，定期清潔、維護(hù)和加註昂貴的燃料，從您的角度來(lái)看，可能不會(huì)帶來(lái)太大的好處。在這種特定情況下，好處微不足道；成本相對(duì)來(lái)說(shuō)是壓倒性的。處?kù)哆@種假設(shè)位置的人甚至可能會(huì)想知道為什麼有人想要汽車！

我提出這個(gè)類比是因?yàn)楫?dāng)它解決您沒(méi)有的問(wèn)題時(shí)，學(xué)習(xí)一項(xiàng)新技術(shù)可能非常困難，這與購(gòu)買汽車可能無(wú)法解決您已經(jīng)擁有的交通工具非常相似。它可能看起來(lái)像是一筆巨大的、不必要的支出。

那麼，包管理器解決的問(wèn)題更多的是規(guī)模和處理問(wèn)題。只要：

• 您擁有的項(xiàng)目數(shù)量是可以管理的；
• 在項(xiàng)目上工作的人數(shù)是可以管理的；
• 需要對(duì)包進(jìn)行的更新數(shù)量是可以管理的；而且，最重要的是，
• 項(xiàng)目中使用的每個(gè)包都是客戶端（瀏覽器）JavaScript 或CSS。

最後一個(gè)是最重要的，因?yàn)槿绻?em>只在瀏覽器中運(yùn)行程序，那麼您將永遠(yuǎn)無(wú)法使用大量的工具（稍後將詳細(xì)介紹）。

如果您確實(shí)選中了所有這些複選框，那麼您可能永遠(yuǎn)不會(huì)超過(guò)這種方法。您的開(kāi)發(fā)方法可能看起來(lái)像這樣：

但即使在這種情況下，當(dāng)您有多個(gè)<script> 標(biāo)簽時(shí)，每個(gè)標(biāo)簽都鏈接到某個(gè)腳本或庫(kù)的特定版本，那么<em>唯一可以查看您正在使用哪些包以及它們是否是最新的方法是手動(dòng)打開(kāi) HTML 并查看代碼。</script>

這本身并不是什么大問(wèn)題，但隨著項(xiàng)目規(guī)模和范圍的擴(kuò)大，這個(gè)問(wèn)題呈指數(shù)級(jí)增長(zhǎng)。您也許可以手動(dòng)跟蹤幾個(gè)包，但是當(dāng)我們談?wù)摰氖菙?shù)百個(gè)——如果不是數(shù)千個(gè)——包時(shí)，您怎么可能做到這一點(diǎn)呢？即使您可以手動(dòng)跟蹤這些包，這仍然會(huì)帶來(lái)人為錯(cuò)誤的高風(fēng)險(xiǎn)。

HTML 的工作不是成為項(xiàng)目中所有使用的包的真相來(lái)源。 除了混合關(guān)注點(diǎn)外，在嘗試合并團(tuán)隊(duì)成員之間不相關(guān)的作品時(shí)，它還可能導(dǎo)致沖突。

所有這些都很重要，但只是更大問(wèn)題的一小部分。請(qǐng)了解，客戶端 JavaScript 可能不是您永遠(yuǎn)想要包含在項(xiàng)目中的唯一類型的包，即使目前是這樣——這就是事情真正開(kāi)始崩潰的地方。

許多生產(chǎn)應(yīng)用程序使用以下工具和包的某種組合，如果不是全部的話：

• Sass（使編寫(xiě) CSS 更容易）
• PostCSS（增強(qiáng) CSS 以實(shí)現(xiàn)最大的效率和兼容性）
• Babel（轉(zhuǎn)換較新的 JavaScript 以在較舊的瀏覽器中運(yùn)行）
• TypeScript（向 JavaScript 添加類型檢查）
• 由自動(dòng)刷新瀏覽器以顯示您的更改的開(kāi)發(fā)服務(wù)器提供的熱模塊重新加載
• 用于代碼捆綁、縮小和/或連接的其他實(shí)用程序
• 自動(dòng)圖像壓縮
• 測(cè)試庫(kù)
• 代碼檢查器

所有這些聽(tīng)起來(lái)都很棒——而且確實(shí)很棒！——但是請(qǐng)注意，您現(xiàn)在有多個(gè)依賴項(xiàng)，這些依賴項(xiàng)不僅不存在于您的 <script></script> 標(biāo)簽中，而且根本沒(méi)有在您的項(xiàng)目中任何地方說(shuō)明！任何人都無(wú)法知道——包括您未來(lái)的自己——使用了哪些工具或需要哪些工具才能使該項(xiàng)目運(yùn)行。

即使您可以通過(guò)這種方式準(zhǔn)確地知道項(xiàng)目需要什么，您仍然需要自己手動(dòng)找到、下載和安裝所有這些包。根據(jù)項(xiàng)目的情況，這很容易成為一天或更長(zhǎng)時(shí)間的任務(wù)。

所有這一切都意味著您的工作流程現(xiàn)在看起來(lái)更像這樣：

所有上述工具都非常方便，您仍然需要管理它們。 依賴項(xiàng)也是項(xiàng)目，它們發(fā)布更新以修復(fù)錯(cuò)誤并引入新功能。因此，簡(jiǎn)單地在 HTML 中粘貼一個(gè)指向 CDN 上包的鏈接的 <script></script> 標(biāo)簽然后認(rèn)為它已經(jīng)完成是不現(xiàn)實(shí)的。您必須確保每件事不僅在您的機(jī)器上安裝并正常工作，而且在每個(gè)協(xié)作者的機(jī)器上也正常工作。

包管理器存在是為了使項(xiàng)目的包——或依賴項(xiàng)——易于管理，方法是知道安裝了什么、有什么可更新的以及一個(gè)包是否可能與另一個(gè)包沖突。包管理器的優(yōu)點(diǎn)是它可以直接從命令行完成所有這些操作，并且工作量最少。

許多包管理器，尤其是 npm，還提供其他功能，這些功能可以打開(kāi)更多可能性，從而使開(kāi)發(fā)更高效。但是管理包是主要吸引力。

有些包管理器不是 npm

這部分與 npm 本身無(wú)關(guān)，但為了完整起見(jiàn)，我還應(yīng)該提到 npm 不是唯一的 JavaScript 包管理器。例如，您可能會(huì)在代碼示例中看到 Yarn 的引用。Yarn 和 npm 的工作方式非常相似，它們之間的大量互操作性是特意構(gòu)建的。

有些人更喜歡一個(gè)包管理器而不是另一個(gè)包管理器。就我個(gè)人而言，我認(rèn)為 npm 和 Yarn 之間的差異最初更為明顯，但現(xiàn)在兩者比以往任何時(shí)候都更加相似。

您可能會(huì)看到代碼示例（包括 CSS-Tricks 文章中的一些示例），這些示例同時(shí)引用 yarn 和 npm。這是為了讓讀者知道這兩種方法都可以，而不是需要同時(shí)使用它們。

Yarn 和 npm 的語(yǔ)法有時(shí)有所不同，但當(dāng)只有一個(gè)存在時(shí)，通?？梢暂p松地將命令或項(xiàng)目從一個(gè)轉(zhuǎn)換為另一個(gè)。從功能上講，您使用哪一個(gè)很少（如果有的話）很重要——當(dāng)然，除了所有在同一項(xiàng)目上一起工作的人都需要使用相同的包管理器以確保兼容性和一致性之外。

雖然 npm 和 Yarn 構(gòu)成了開(kāi)發(fā)人員使用的絕大多數(shù)包管理器，但還有一個(gè)名為 PnPm 的包管理器實(shí)際上是 npm，但性能更高、效率更高。權(quán)衡是 PnPm 在某些情況下需要更多技術(shù)知識(shí)，因此它更高級(jí)。

使 npm 成為“標(biāo)準(zhǔn)”包管理器的因素

同樣，我只是提出其他包管理器是為了說(shuō)明 npm 不是唯一存在的包管理器——但它通常是標(biāo)準(zhǔn)的。

是什么使它成為包管理器中的“標(biāo)準(zhǔn)”？包括 Ruby 和 PHP 在內(nèi)的其他語(yǔ)言多年來(lái)都有包管理器；在 npm 之前，JavaScript 實(shí)際上沒(méi)有任何好的包管理器。

npm 最初是一個(gè)獨(dú)立的開(kāi)源項(xiàng)目，但在 2020 年被微軟收購(gòu)。它技術(shù)上包含兩個(gè)部分：實(shí)際的包管理器本身；以及包注冊(cè)表，這是一個(gè)不斷增長(zhǎng)的列表，其中包含近 200 萬(wàn)個(gè)可供安裝的包。

您可以將 npm 視為您可能想要在前端或基于 Node 的項(xiàng)目中使用的任何東西的應(yīng)用程序商店。找到您想要的東西并通過(guò)命令行將其安裝到您的系統(tǒng)。當(dāng)發(fā)布新版本時(shí)，您可能會(huì)更新該包，或者如果項(xiàng)目不再依賴它，則完全刪除它。

關(guān)于 npx 的說(shuō)明

您也可能會(huì)看到 npx 命令出現(xiàn)。npx 實(shí)際上是 npm 的一部分，但是通過(guò)在命令中使用 npx 而不是 npm，您可以執(zhí)行包的代碼，而不會(huì) 永久 安裝它。NPX 只安裝它需要的東西，運(yùn)行它，然后將其刪除。

例如，如果您想運(yùn)行安裝程序腳本，這將很有用。npx 不需要下載安裝程序，然后運(yùn)行它，它允許您直接運(yùn)行安裝程序，之后不會(huì)在您的機(jī)器上留下任何東西。它就像一個(gè)清理自己東西的客人。

另一個(gè)很酷的例子：如果您只想編譯項(xiàng)目中的 Sass 文件一次，而不必費(fèi)心完全安裝 Sass，您可以運(yùn)行 npx sass（以及必要的輸入和輸出參數(shù)）。在大多數(shù)情況下，這可能不切實(shí)際，但如果您只是需要在這里和那里進(jìn)行快速的一次性編譯，那么 npx 將是一種方便的方法，因?yàn)樗馕吨枰潞途S護(hù)的已安裝包更少。

接下來(lái)的步驟

好的，這就是我們稱某個(gè)東西為包管理器時(shí)所指的深入探討。對(duì)于 npm 而言，它專門用于安裝和管理 Node 包，這些工具有助于向項(xiàng)目添加功能、添加方便的開(kāi)發(fā)人員便利性……或所有上述內(nèi)容！

接下來(lái)，我們將邁出使用 npm 的第一步。為此，我們需要將其安裝到我們的系統(tǒng)中。這是本 npm 完全指南中的下一步。

← 第 4 章 第 6 章 →

以上是軟件包經(jīng)理是什麼？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！