“npm”到底是什么意思？

使这个新兴的、以工具为主的前端开发时代在最初看起来难以理解的一件事是，尽管我们经常用一个名称来称呼事物，但它们往往实际上是由几个不同的相互关联的部分组成的。 npm 及其周围的生态系统也是如此。

例如：想想我们如何随意地提到“互联网”，即使网络本身不是一个单一的、统一的事物，而是一组协议、DNS、服务器、浏览器、网络、请求和响应，以及多年迭代中积累的许多其他事物。 实际上，即使浏览器本身也是一台具有许多部件的机器。

指南章节

1. 这个指南适合谁？
2. “npm”到底是什么意思？ (您现在就在这里！)
3. 命令行到底是什么？
4. Node 到底是什么？
5. 包管理器到底是什么？
6. 如何安装 npm？
7. 如何安装 npm 包？
8. npm 命令到底是什么？
9. 如何安装现有的 npm 项目？

npm 是一个技术集合

以同样的方式，我们通常认为的“npm”（是的，全部小写）以及“前端的后端”特别地是许多不同技术和系统的集合的名称； 一种鲁布·戈德堡机器，用于生成浏览器友好的代码。

我已经提到了命令行； 这是生态系统的重要组成部分，因为它是我们与之交互的方式。 但更多内容将在下一章中介绍。

然后是 npm，它属于一种称为“包管理”软件的类别。 我们也将介绍它。 实际上，您可能会看到我在本指南中将 npm 称为包管理器。

最后，还有Node 本身，它很难简明地解释，我经常用道格拉斯·亚当斯的话来描述它：它是一种编程语言，几乎与 JavaScript 相似，但又不太一样。

npm 管理项目工具

为了进一步使事情变得复杂，许多项目（在其中您在命令行中键入 npm install）可能附带预安装的工具，以帮助您在项目中执行各种操作，例如处理您的代码（例如，将 Sass 代码转换为 CSS）。 那里有许多一体化、预配置的项目，它们只等待您安装它们并开始使用（Create React App、Next、Nuxt 和 SvelteKit，仅举几例）。 当然，如果做得好的话，这是很方便的，但它也增加了复杂性，这意味着我们需要在“前端的后端”事物列表中添加更多名称。

此列表通常包括像 Babel（用于编译 JavaScript）、Sass（用于编译 CSS）、webpack（用于资产捆绑）、Vite（用于开发服务器和其他工具）、PostCSS（用于将一种语法转换为另一种语法）；Autoprefixer（它可以是 PostCSS 插件，用于 CSS 供应商前缀）；TypeScript（用于额外的 JavaScript 语法）；ESlint（用于检查代码质量）；Prettier（用于格式化代码）以及测试库，如 Jest 或 Cypress。

所有这些东西（以及更多）都属于这类广泛的工具类别，这些工具通常与 npm 安装的项目一起提供——或者可以通过 npm 安装和使用——但实际上并不属于 npm 本身。 它们只是现代工具的示例，这些工具帮助我们用代码做一些好的事情，我在这里提到它们只是因为值得注意这种区别，以便了解在这个庞大而全新的世界中边界在哪里。

顺便说一句，如果您不知道上面提到的大多数（或任何）工具是什么，没关系。 也许您还没有遇到过它们，或者您可能在一个安装了这些工具但不知道其名称的项目上工作过。 无论哪种情况，所有这一切都只是为了提供额外的上下文。

让我们在这里休息一下

如果您此时已经感到有些不知所措：别担心。 我希望您在读完本章后能够记住的关键是，我们认为的“npm”（或者更随意地说“所有这些命令行、后端的东西”）实际上并不是一个东西，而是一组相互协作的东西，使我们的开发变得更容易。

是的：虽然所有这些复杂性在开始时看起来很吓人，但它确实让事情变得更好。 我保证。

虽然前端看起来发展得很快，但不，您并没有被落下。 您可能只需要继续学习才能赶上。