如果你在记分的话,到目前为止,在这个npm指南中,我们已经对npm有了一个大致的了解--尤其是它代表了Node Package Manager。在这个过程中,我们已经讨论了命令行的重要性,以及它是如何被用于npm的。
我们还特别研究了npm中的 "n"--Node,并了解到Node很像我们写的用于在浏览器中运行网站的JavaScript代码。事实上,Node就是JavaScript;它只是在浏览器之外运行,并且能够做与基于浏览器的对应程序不同的事情。
指南章节
- 本 指南到底是 为谁 而写的?
- npm "到底是什么意思?
- 命令行是什么?
- Node是什么?
- 软件包管理器是什么? (You are here!)
- 如何安装npm?
- 你是如何安装npm包的?
- npm命令到底是什么?
- 你如何安装一个现有的npm项目?
我们所说的 "包 "是什么意思
现在让我们把注意力转向npm的最后两个字母,即 "包管理器 "部分。为了充分理解npm是什么,我们需要知道什么是软件包管理器。因此,为了理解这一点,我们自然需要理解 "包 "到底是什么。
"包"是一个包罗万象的术语,指的是你拉到一个项目中并以某种方式使用的任何外部代码文件。也许你过去曾在一个项目中使用过jQuery、Bootstrap或Axios。这些都是软件包的常见例子。
我们称这些为 "包",因为它们被 "打包 "了,随时可以使用。有些语言用其他名字称呼它们(例如Ruby称它们为 "宝石"),但概念是一样的。冒着过度简化的风险, 一个包是你没有写,但从一些公共来源得到的代码,在你的项目中使用。你知道,第三方代码。
或者,如果你喜欢用音乐来模仿你的记忆装置。
🎵当有你选择的代码
🎵不是你的,但你使用
🎵那就是一个包
🎵当它是你安装的东西
🎵你导入和调用的
,🎵那就是一个包
。
包也经常被称为 "依赖",因为你写的代码依赖于它们的存在。例如,如果jQuery本身没有被加载,使用jQuery的$ 编写的代码就不能正常工作。(由于这个原因,包管理器有时也被称为 "依赖性管理器")。
就它们所包含的代码数量而言,包可以很大也可以很小。一个包可能会做一些巨大的事情,改变你编写整个项目的方式(比如整个框架),或者它可能会做一些非常小而集中的事情,你只在需要的地方撒入(比如一个小部件,或者一个特定任务的助手)。
在没有包管理器的情况下使用包
最有可能的是,如果你在过去使用了一个包,你只是在HTML中使用了一个脚本标签,从外部URL(最好是从CDN)中提取。下面是你如何在你的网站的HTML中包含jQuery。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
另一种方法是下载一个包的副本,把它添加到你的项目文件中,然后在本地链接到它,像这样。
<script src="/jquery.min.js"></script>
什么包管理器可以解决
这两种方法多年来一直运行良好。它很简单。它很干净。就软件包而言,它通常可以让你 "设置它并忘记它"。那么,为什么你会需要别的东西呢?
你可能可以想象,对于那些可以随时获得便利交通的人来说,拥有一辆汽车似乎并不吸引人,或者那些没有长途旅行需要的人。(这将与包装经理的谈话联系起来,我保证,请听我说。)
如果你有方便快捷的公共交通,那么从你的角度来看,花大价钱买一台巨大的机器,你必须把它存放在某个地方,定期清洁,维护,并注入昂贵的燃料,可能不会有太大的好处。在这种情况下,好处是可以忽略不计的;而成本则是相对而言的,是压倒性的。处于这种假设位置的人甚至会想,为什么有人要买车呢?
我之所以提出这个比喻,是因为当一项新技术解决了一个你没有的问题时,学习它可能会非常困难,就像买一辆车可能无法解决你已经有的交通问题一样。它可能看起来像一个巨大的、没有必要的开支。
那么,包管理器所解决的,更多的是一个扩展和处理问题。简单地在一个脚本标签中链接到一个包,效果很好,只要。
- 你拥有的项目数量是可控的。
- 在这些项目上工作的人数是可控的。
- 需要对包进行更新的数量是可控的;而且,最关键的是。
- 你的项目中使用的每一个包都是客户端(浏览器)的JavaScript或CSS。
最后一条是最重要的,因为如果你只在浏览器中运行的话,有大量的工具是你无法使用的(稍后再谈)。
如果你勾选了所有这些选项,你可能永远不会放弃这种方法。你的开发方法可能只是看起来像这样。

但即使在这种情况下,当你有多个<script> 标签,每个标签都链接到某个脚本或库的特定版本时,要想了解你使用的是什么包--以及它们是否是最新的,唯一的办法就是手动打开HTML并查看代码。
这本身并不是什么问题,但随着项目规模和范围的扩大,这个问题就会成倍增长。你也许可以手动跟踪几个包,但当我们谈论的是成百上千的包时,你怎么可能做到这一点?而且,即使你可以手动跟踪这些包,这仍然会带来很大的人为错误风险。
HTML的工作不是成为一个项目中使用的所有软件包的真相来源。除了混合关注之外,在试图合并队友之间不相关的工作时,它也可能引入冲突。
所有这些都很重要,但这只是一个大问题的最小部分。要知道,客户端的JavaScript可能不是你想永远包含在你的项目中的唯一类型的包,即使它是在当下--这就是事情真正开始崩溃的地方。
许多生产型应用程序都使用以下工具和包的一些组合,如果不是全部的话。
- Sass(使编写CSS更容易)
- PostCSS(增强CSS以获得最大的效率和兼容性)
- Babel(转换较新的JavaScript以在较旧的浏览器中运行)
- TypeScript(将类型检查添加到JavaScript)。
- 开发服务器的热模块重载,自动刷新浏览器以显示你的变化
- 用于代码捆绑、最小化和/或串联的额外工具
- 自动图像压缩
- 测试库
- 铸币师
这一切听起来都很好,而且确实如此!但请注意,你现在有多个依赖项,它们不仅没有出现在你的脚本标签中,而且根本没有在你的项目中的任何地方得到说明!这就是为什么你的项目中没有一个依赖项。任何人--包括你未来的自己--都不可能知道这个项目是用了什么工具或者需要什么工具来运行的。
即使你能确切地知道这个项目需要什么,你仍然需要自己去定位、下载和安装所有这些包......手动。根据项目的情况,这可能很容易成为一个长达一天的任务,甚至更长。
所有这些意味着你的工作流程现在看起来有点像这样。

同样,这都是好事。这个工具链意味着提交给浏览器的东西是高度优化的,但这也是额外的开销和复杂性。
尽管上面的所有工具都很方便,但你仍然需要管理它们。依赖关系也是一个项目,它们运送更新以修补错误和引入新功能。因此,在HTML中简单地粘贴一个脚本标签,加上一个指向CDN上的软件包的链接,然后就可以了,这是不现实的。你必须确保每个东西都安装好了,而且不仅在你的机器上,而且在每个合作者的机器上都能正常工作。
软件包管理器的存在是为了使一个项目的软件包--或者说是依赖关系--可以通过了解哪些东西已经安装,哪些东西可以更新,以及一个软件包是否会与另一个软件包产生冲突来进行管理。软件包管理器的优点是它可以直接从命令行中完成所有这些工作,而且工作量很小。
许多软件包管理器,特别是npm,还提供了额外的功能,开辟了更多的可能性,使开发更有效率。但管理软件包是主要的吸引力。
有一些不是npm的软件包管理器
这一部分与npm本身并不超级相关,但为了完整起见,我还应该提到,npm并不是唯一的JavaScript软件包管理器。例如,你可能会在代码实例中看到Yarn的引用。Yarn和npm的工作方式基本相同,以至于两者之间的大量互操作性是特意建立的。
有些人喜欢一个软件包管理器而不是另一个。就我个人而言,我认为npm和Yarn之间的差异一开始比较明显,但现在两者的相似度更高了。
你可能会看到一些代码实例(包括CSS-Tricks文章中的一些)同时引用yarn 和npm 。那是为了让读者知道,任何一种方法都可以,而不是需要同时使用这两种方法。
Yarn和npm的语法有时是不同的,但在只有一个的情况下,将一个命令或项目从一个转换到另一个通常是很容易的。在功能上,你使用哪一个很少(如果有的话),当然,除了每个人都在同一个项目上工作,会希望使用同一个,以确保兼容性和一致性。
虽然npm和Yarn构成了开发者使用的绝大多数软件包管理器,但还有一个叫做PnPm的软件包管理器,它实际上是npm,但性能和效率更高。其代价是,PnPm在某些情况下需要更多的技术知识,所以它是一个更高级的选择。
是什么让npm成为 "标准 "的软件包管理器?
同样,我提出其他软件包管理器只是为了说明npm并不是唯一的软件包管理器,但它通常是标准的。
是什么让它成为软件包管理器中的 "标准"?其他语言,包括Ruby和PHP,已经有很多年的包管理器了;在npm之前,JavaScript确实没有任何好的包管理器。
npm最初是一个独立的开源项目,但在2020年被微软收购。从技术上讲,它有两个部分:实际的包管理器本身;以及包注册表,这是一个不断增长的近200万个可安装包的列表。
你可以把npm看作是你可能想在前端或基于Node的项目中使用的任何东西的应用商店。找到你想要的东西并通过命令行将其安装到你的系统中。当新版本发布时,你可能会更新该软件包,或者如果项目不再依赖它,则完全删除它。
关于npx的说明
你可能也会看到npx 命令漂浮在那里。npx实际上是npm的一部分,但通过在命令中使用npx ,而不是npm ,你可以执行一个包的代码*,而不* 永久 安装它。NPX只是安装它需要的东西,运行它,并转储它。
例如,如果你想运行一个安装程序脚本,这很有帮助。与其下载安装程序,然后运行它,Npx让你简单地直接运行安装程序,之后在你的机器上不留下任何东西。它就像家里的客人一样,会自己打扫卫生。
另一个很酷的例子:如果你想编译你的项目的Sass文件,你可以运行npx sass (连同必要的输入和输出参数),只需一次,而不用去完全安装Sass。这在大多数情况下可能并不实用,但如果你只是需要快速的一次性编译,npx将是一个方便的方法,因为它意味着需要更新和维护的安装包较少。
下一步是什么
好了,这就是我们对我们称之为包管理器的东西的深层含义。就npm而言,它是专门用来安装和管理Node包的,这些工具可以帮助为项目增加功能,为开发者增加便利......或者以上所有的功能
接下来,我们将迈出使用npm的第一步。要做到这一点,我们需要把它安装到我们的系统中。这将是本期npm完整指南的下一个内容。