npm 完全初学者指南

我清楚地记得在我编码生涯的早期,我开始感觉到事情正在从我所了解的方向发生变化,转向了一套更复杂的工具和实践,这些工具和实践以命令行和称为npm的东西为基础。

这是初学者指南的第一部分,我们将涵盖 Node 包管理器(或 npm)的广泛主题。当我们在命令行中输入这三个小字母——npm——时,我们常常将其视为理所当然,但 npm 是一个更大的生态系统的一部分,对于任何第一次接触它的人来说,这个生态系统通常令人望而生畏或感到困惑。本指南将帮助您消除对该生态系统的误解,并帮助您不仅了解 npm 是什么以及它做什么,而且最终能够自信地使用它。

指南章节

  1. 这个指南到底适合谁? (您现在就在这里!)
  2. “npm”到底是什么意思?
  3. 命令行到底是什么?
  4. Node 到底是什么?
  5. 包管理器到底是什么?
  6. 如何安装 npm?
  7. 如何安装 npm 包?
  8. npm 命令到底是什么?
  9. 如何安装现有的 npm 项目?
The npm logo in white against a gradient background tat goes from bright red to orange from left to right to kick off this npm guide.

现代“前端后端”开发(npm 是其中一部分)看起来很复杂,因为它是一个名称,代表了许多相互关联的工具。当您考虑到前端世界似乎比实际情况发展得更快时,就会产生一种感觉,即如果您没有立即采用最新事物,就会被抛在后面,所有这些都可能让人难以接近。

这就是我们开始编写本指南的原因——让您能够更轻松地在自己的工作中使用这项技术。

这个指南到底适合谁?

在我个人的学习之旅中,我会阅读关于让我兴奋的技术的指南,然后看到一个部分写着“只需 npm install”这样或那样,我就会发出又一次失望的叹息,放弃使用任何看起来很酷的东西。或者,在更冒险的日子里,我可能会复制该命令,但随后不可避免地要么遇到我不理解的另一个步骤(“只需”,他们总是说,“执行[一些我不知道的事情]”),要么收到指南没有解释的错误消息,从而让我止步不前。

无论 npm 是什么——无论这些命令做什么以及您应该在哪里输入它们——没有人曾经花时间向我解释过。而且,我读的指南越多,这些指南都是由那些认为自己掌握了这些知识的人编写的,我就越感到孤立无援。

如果以上任何内容听起来都很熟悉:本系列文章适合您。.

您很可能属于近年来被描述为“前端的前端”的那部分人。像我一样,您可能在 HTML 和 CSS 方面非常了解。也许您还了解一些 JavaScript,“原生” JavaScript 或通过 jQuery。无论哪种方式都可以,对于本文的目的和一般而言都是如此。

也许您甚至尝试过 React 或 Vue 这样的框架,但您基本上只是复制粘贴了一些内容来启动和运行您的项目,并且并不完全确定这些内容实际上做了什么。

  • 如果您感觉到鸿沟存在于前端开发的传统定义和“现代”定义之间——并且如果您担心如果不弥合这种差距,可能会损害您的职业生涯,这篇文章适合您
  • 如果您不确定终端和命令行的所有炒作是什么,并且您更希望永远不要碰它们,这篇文章适合您
  • 如果您想知道为什么其他开发人员似乎喜欢把事情搞得如此复杂,以及为什么首先要使用所有这些命令行垃圾,而您可以编写简单的 HTML、CSS 和 JavaScript 代码,这篇文章适合您
  • 如果您感到被排除在外。如果您感觉到有一些东西,一些非常重要的事情,没有人真正费心向您解释过,并且您担心自己是唯一一个不明白的人,这篇文章适合您

请知道,我的前端开发人员同行:您并不孤单。您远非孤单。您正处于我不久前所处的位置,而我对那个地方的不稳定记忆仍然历历在目。

让我尝试用我希望有人在我甚至不知道如何提问之前就为我做到的方式,来回答您可能遇到的问题——我曾经遇到的那些问题。

本指南涵盖哪些内容

本指南是一系列文章。这并不是因为这些内容本身就极其难以理解;而是因为其中包含许多部分,并且每个部分都需要单独解释。这是一个广阔的领域,有许多兔子洞可以探索。一次专注于一个坚实的步骤,使我们能够花费时间使事情变得清晰易懂。目标不是涵盖所有内容,但我确实希望比快速地讲解更全面一些。

我们将首先讨论当前的现状;npm 是什么,它来自哪里以及我们是如何走到今天的。然后,我们将介绍 Node 本身是什么,然后是通用包管理器是什么,然后再实际使用 npm。最后,我们将安装 Node 和 npm(如果它们尚未安装),初始化一个项目以了解其工作原理,最后,从 GitHub 安装一个真实的 npm 项目及其所有包和命令。

现在,其中一些(或全部)内容可能听起来非常吓人,但不用担心。这就是为什么我们要一起花费整篇指南的时间。

开始前需要了解什么

我会尽量减少对您的假设,除了您是一名 Web 开发人员,并且通常知道如何使用 HTML 和 CSS 构建网站。您不需要了解太多关于 JavaScript 的知识,也不需要为此编写任何 JavaScript 代码才能遵循本指南,但如果您至少对 JavaScript 是什么以及它是如何工作的有一个基本的了解,那将非常有帮助。

JSON 是开始之前可能需要了解的另一个部分。如果您不熟悉 JSON,可能值得浏览一下这篇JSON 指南,或者至少在我们需要用到它时准备好它。

除此之外,我可能会参考特定的工具、项目和框架,例如BootstrapReactVueSvelteKit,但我不会假设您有任何实际操作经验,也不会假设您以前使用过 npm 或命令行。

准备好开始了吗?让我们从澄清“npm”的含义开始,例如它的含义以及它如何融入现代 Web 开发。