In this npm guide, we have a general understanding of npm – it stands for the Node Package Manager. In the process, we discuss the importance of the command line and how it works with npm.

We also specifically looked at "n" in npm - Node - and learned that Node is very similar to the JavaScript code we run a website in a browser. In fact, Node is JavaScript; it just runs outside the browser and can perform different operations than its browser-based counterpart.

Guide Chapter

1. Who is this guide for?
2. What does "npm" mean?
3. What is the command line?
4. What is Node?
5. What is a package manager? (You are now!)
6. How to install npm?
7. How to install npm package?
8. What is the npm command?
9. How to install an existing npm project?

The meaning of "bao"

Now let's focus on the last two letters in npm, the "package manager" section. To fully understand what npm is, we need to know what a package manager is. So, naturally, in order to understand that , we need to understand what the "package" is.

" Package " is a general term for any external code file you add to your project and use in some way. Maybe you have used jQuery, Bootstrap, or Axios in your projects in the past. These are common examples of packages.

We call them "packages" because they are "packaged" and ready to use. Some languages ??call them other names (for example, Ruby calls them "gem"), but the concept is the same. To avoid oversimplification, packages are code that you didn't write but get from some public sources for use in your project. You know, third-party code.

Or, if you prefer musical imitation using mnemonics:

? When you select the code ? Not yours, but you use ? Is this a package ? When you install something ? You import and call it, ? Is this a package

Packages are also often referred to as "dependencies" because the code you write depends on their existence. For example, code written with jQuery's $ will not work properly if jQuery itself is not loaded. (So, package managers are sometimes called "dependency managers".)

The size of the package may vary in terms of the amount of code included. A package can do some huge operations, thus changing the way you write your entire project (like the entire framework), or it can do some very small, focused operations that you just add where you need it (like widgets or helper programs for a specific task).

Use packages without using package manager

If you have used packages in the past, it is very likely that you are just using script tags in HTML to apply them to script tags extracted from external URLs (ideally from CDN). Here is how you can include jQuery in the HTML of your website:

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

Another way is to download a copy of the package, add it to the folder of the project, and then link to it like so:

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

Problems solved by package manager

Both methods have worked well over the years. It's very simple. It's very clean. As far as packages are concerned, it usually allows you to "set up and forget". So why do you need something else?

As you can imagine, owning a car may not seem attractive for someone who can easily use public transportation or do not need long trips. (This will be related to the package manager discussion, I promise. Stick with it.)

If you are convenient to use efficient public transportation, paying a high price for a large machine, you have to store it somewhere, regularly cleaning, maintaining and filling up expensive fuel, which may not be much of a benefit from your point of view. In this particular case, the benefits are insignificant; the cost is relatively overwhelming. People in this hypothetical position may even wonder why anyone wants a car!

I propose this analogy because when it solves problems you don't have , it can be very difficult to learn a new technology, which is very similar to buying a car that might not solve the transportation you already have. It might seem like a huge, unnecessary expense.

Then, the problems solved by the package manager are more about scale and processing problems. if only:

• The number of projects you have is manageable;
• The number of people working on the project is manageable;
• The number of updates required to make to the package is manageable; and, most importantly,
• Each package used in the project is client (browser) JavaScript or CSS.

The last one is the most important thing, because if you only run programs in your browser, you will never be able to use a lot of tools (more on that later).

If you do check all of these check boxes, you probably never go beyond this method. Your development method might look like this:

But even in this case, when you have multiple<script> 標簽時，每個標簽都鏈接到某個腳本或庫的特定版本，那么<em>唯一可以查看您正在使用哪些包以及它們是否是最新的方法是手動打開 HTML 并查看代碼。</script>

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

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

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

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

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

所有這些聽起來都很棒——而且確實很棒！——但是請注意，您現(xiàn)在有多個依賴項，這些依賴項不僅不存在于您的 <script></script> 標簽中，而且根本沒有在您的項目中任何地方說明！任何人都無法知道——包括您未來的自己——使用了哪些工具或需要哪些工具才能使該項目運行。

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

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

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

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

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

有些包管理器不是 npm

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

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

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

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

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

使 npm 成為“標準”包管理器的因素

同樣，我只是提出其他包管理器是為了說明 npm 不是唯一存在的包管理器——但它通常是標準的。

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

npm 最初是一個獨立的開源項目，但在 2020 年被微軟收購。它技術(shù)上包含兩個部分：實際的包管理器本身；以及包注冊表，這是一個不斷增長的列表，其中包含近 200 萬個可供安裝的包。

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

關(guān)于 npx 的說明

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

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

另一個很酷的例子：如果您只想編譯項目中的 Sass 文件一次，而不必費心完全安裝 Sass，您可以運行 npx sass（以及必要的輸入和輸出參數(shù)）。在大多數(shù)情況下，這可能不切實際，但如果您只是需要在這里和那里進行快速的一次性編譯，那么 npx 將是一種方便的方法，因為它意味著需要更新和維護的已安裝包更少。

接下來的步驟

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

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

← 第 4 章 第 6 章 →

The above is the detailed content of What the Heck is a Package Manager?. For more information, please follow other related articles on the PHP Chinese website!