NPM的明確定義及其做什麼

現代前端開發工具繁多，初學者常常感到困惑。許多概念看似單一，實則由多個相互關聯的部分構成，npm 及其生態系統便是如此。

例如，“互聯網”一詞看似簡單，卻包含協議、DNS、服務器、瀏覽器、網絡、請求和響應等眾多組件，以及多年迭代積累的其他技術。瀏覽器本身也是由多個部分組成的複雜系統。

指南章節

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

npm 是一個技術集合

同樣，我們通常所說的“npm”（全部小寫）以及“前端后端”實際上是許多不同技術和系統的集合，如同一個複雜的魯布·戈德堡機械裝置，用於生成瀏覽器友好的代碼。

前面提到了命令行，它是我們與npm 生態系統交互的主要方式，下一章將詳細介紹。

npm 本身屬於“包管理”軟件類別，我們也會對此進行講解。事實上，在本指南中，我可能會經常將npm 稱為包管理器。

最後是Node.js 本身，它難以簡潔地解釋，我經常用道格拉斯·亞當斯的話來概括：它是一種幾乎——但並非完全——類似於JavaScript 的編程語言。

npm 管理項目工具

更複雜的是，許多在命令行中輸入npm install的項目可能預裝了各種工具，用於執行項目中的各種任務，例如處理代碼（例如，將Sass 代碼轉換為CSS）。許多一站式預配置項目可供直接安裝使用（例如Create React App、Next.js、Nuxt.js 和SvelteKit）。這固然方便，但也增加了複雜性——意味著我們需要在“前端后端”事物的清單中添加更多名稱。

此清單通常包括Babel（用於編譯JavaScript）、Sass（用於編譯CSS）、Webpack（用於資源捆綁）、Vite（用於開發服務器和其他工具）、PostCSS（用於將一種語法轉換為另一種語法）、Autoprefixer（可以作為PostCSS 插件用於CSS 供應商前綴）、TypeScript（用於額外的JavaScript 語法）、ESLint（用於檢查代碼質量）、Prettier（用於格式化代碼）以及Jest 或Cypress 等測試庫。

所有這些（以及更多）工具都屬於一個廣泛的類別，它們通常與npm 安裝的項目一起提供——或者可以通過npm 安裝和使用——但實際上並非npm 本身的一部分。它們只是現代工具的示例，有助於我們更好地處理代碼，在這裡提及它們只是為了說明區別，以便了解在這個龐大而新興的世界中界限在哪裡。

順便說一句，如果您不知道上面提到的大多數（或任何）工具是什麼，沒關係。也許您還沒有遇到過它們，或者您曾在項目中安裝了它們而不知道它們的名稱。無論哪種方式，所有這些都只是為了提供額外的上下文。

暫且告一段落

如果您此時感到有些不知所措，請不要擔心。我希望您在閱讀本章後能夠記住的關鍵點是，我們認為的“npm”（或者更隨意地說，“所有那些命令行、後端的東西”）並不是單一事物，而是一組協同工作的組件，使開發對我們來說更容易。

是的：雖然所有這些複雜性一開始看起來令人生畏，但它確實使事情變得更好。我保證。

雖然前端發展似乎非常迅速，但您並沒有被落下。您可能只需要進行一些持續的學習來趕上進度。

← 第1 章第3 章→

以上是NPM的明確定義及其做什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！