使得这个新的、工具密集的前端开发时代一开始看起来很难理解的事情之一是，虽然我们经常用一个单一的名字来称呼事物，但它们实际上往往是由几个不同的相互联系的部分组成的。npm和它周围的生态系统也是如此。
比如说。想一想我们是如何随口提到 "互联网 "的，尽管网络本身并不是一个单一的、统一的东西，而是一个由协议、DNS、服务器、浏览器、网络、请求和响应以及许多其他东西组成的集合，经过多年的迭代。就这一点而言，即使是浏览器本身也是一台有许多部件的机器。
指南的各个章节
- 这本指南到底是为谁准备的？
- npm "到底是什么意思？ (你在这里！)
- 命令行是什么鬼东西？
- Node是什么？
- 软件包管理器是什么？
- 你是如何安装npm的？
- 如何安装npm包？
- npm命令到底是什么？
- 如何安装一个现有的npm项目？
npm是一个技术的集合
同样地，我们通常认为的 "npm"（是的，全部小写），特别是 "前端后端"，是许多不同的单独技术和系统的集合的一个名称；是一种生成浏览器友好代码的Rube Goldberg机器。
我已经提到了命令行；那是生态系统的一个重要部分，因为它是我们与它互动的方式。但在下一章会有更多关于这个问题的内容。
然后是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就像一栋图书馆大楼，里面的藏书层层叠叠，井井有条，让人更容易找到和管理。(Photo:Johannes Mändle onUnsplash)
所有这些东西（以及更多）都属于这个广泛的、一般的工具类别，这些工具通常与npm安装的项目一起出现，或者可以通过npm安装和使用，但实际上不是npm本身的一部分。它们只是现代工具的例子，帮助我们用我们的代码做一些好的事情，我在这里提到它们只是因为值得注意到这种区别，以了解在这个大的、新的世界中的边界在哪里。
顺便说一下，如果你不知道上面提到的大多数（或任何）工具是什么，那也没关系。也许你还没有遇到过它们，或者你曾在一个项目中安装过它们，但不知道它们的名字。无论怎样，所有这些仅仅是为了补充背景。
让我们在这里休息一下
如果你在这一点上已经感到有点不知所措：不要紧张。我希望你在读完这一章后能明白，我们所认为的 "npm"（或者更随意地称为 "所有的命令行、后端东西"）其实并不是一个东西，而是一系列东西的集合，它们一起工作让我们的开发更容易。
是的：虽然所有这些复杂的东西在前面看起来很吓人，但实际上它确实使事情变得更好。我保证。
虽然前端似乎发展得很快，但不，你并没有被抛在后面。你可能只是需要接受一些继续教育，才能赶上。
