搜索
首页web前端css教程如何安装NPM软件包

How to Install npm Packages

深入了解 npm!前面章节我们已经学习了 Node 和包管理器,甚至安装了 Node 和 npm 并熟悉了 Node 版本管理器 (nvm)。本 npm 初学者指南的下一部分将介绍您可能最关心的内容:安装 npm 包

指南章节

  1. 本指南面向谁?
  2. “npm” 到底是什么意思?
  3. 命令行是什么?
  4. Node 是什么?
  5. 包管理器是什么?
  6. 如何安装 npm?
  7. 如何安装 npm 包?(您当前位置!)
  8. npm 命令是什么?
  9. 如何安装现有的 npm 项目?

一个快速示例

我们可以使用 npm install 命令(或简写为 npm i)以及要添加到项目的包名称来安装我们的第一个包。例如,Sass 的 Node 包简称为“sass”,这意味着我们可以像这样将其添加到项目中(请确保您首先在一个为这个小项目创建的新文件夹中):

npm install sass

就是这样!输入此命令后,npm 将立即开始工作:

幕后发生的情况是,npm 尝试在 npm 包注册表中查找名为 sass 的包。如果找到该包(确实会找到),npm 会将其安装到项目中自动生成的 node_modules 文件夹(稍后会详细介绍)中(位于项目根文件夹中),包括该包运行所需的一切。(这就是为什么您看到 npm 添加了 16 个包并审核了总共 17 个 npm 包,而不是仅 Sass 包本身——它也有依赖项!)

运行安装命令后,您可能会注意到,您在项目文件夹中没有看到名为“sass”的任何内容,这与您可能预期的不同。然而,奇怪的是,我们确实在项目文件夹中看到了三个新项目:两个名为 package.jsonpackage-lock.json 的 JSON 文件,以及一个全新的 node_modules 文件夹。

这些是什么?我们要求 npm 安装 Sass,而不是所有这些东西。这不是 Sass 的一部分……对吧?是的,这是正确的,但是为什么在项目文件夹中生成这些新项目有一个很好的解释。让我们看看刚刚发生了什么。

安装包时会发生什么

安装(或卸载或更新)包时,npm 会执行以下四件事中的大部分甚至全部:

  1. 根据需要更新项目中的 package.json 文件;
  2. 更新包含所有技术细节的 package-lock.json 文件(称为“锁文件”);
  3. 安装实际的包文件——以及原始包可能依赖的任何其他包(在 node_modules 文件夹内);以及
  4. 运行已安装包的审核。

让我们逐一进行介绍。

package.json 和 package-lock.json

这两个 JSON 文件协同工作,以确保准确记录项目中的所有依赖项(以及所有它们的依赖项,以及所有它们的依赖项的依赖项,依此类推)。两者之间的区别有点技术性,但简单来说:锁文件是项目依赖项树的深入、精确的快照,而 package.json 是一个高级概述,它还可以包含其他内容。您安装的主要包可能列在 package.json 中,但 package-lock.json 是跟踪整个依赖项树的位置。

锁文件也不应该手动更新;只能由 npm 更新。因此,请务必避免将锁文件与 package.json 文件混淆。

当您与他人共享或协作处理项目时,npm 通过这两个文件知道项目的来源以及项目中安装的内容。由于这些信息,它可以精确地在任何其他人的机器上复制该环境。这两个文件都应该提交到您的 Git 仓库,并作为项目的依赖项蓝图。这样,当您的团队中的另一位开发人员克隆仓库并运行 npm install 命令时,npm 确切地知道要安装哪些包,从而使您和您的同事保持同步。

如果您打开 package.json,您不会看到太多内容,但值得一看一下,看看发生了什么:

{
  "dependencies": {
    "sass": "^1.43.4"
  }
}

您可能不会看到确切的版本号(因为自撰写本文以来该包已更新),但您应该在 JSON dependencies 对象内看到 sass。数字本身(在本例中为 1.43.4)指示已安装的 Sass 的特定版本。

作为简短但重要的旁注:版本号开头的脱字符 (^) 允许 npm 安装对包的次要更新。换句话说,它告诉 npm 已安装的 Sass 包必须至少为 1.43.4 版本,但可以是任何更高的 1.x.x 版本,只要它仍在 2.0.0 以下即可。npm 通常在安装包时选择最新的稳定版本,但添加此内容是为了允许进行非破坏性更新。这部分称为“语义版本控制”,它本身就是一个博文主题,但并非 npm 独有。

总之,这就是这两个 JSON 文件。接下来让我们讨论 node_modules 文件夹。

node_modules

node_modules 是所有实际包代码所在的位置;这是已安装的 Node 包以及使它们运行的所有内容的实际安装位置。如果您现在在按照说明操作时打开该文件夹,您会找到一个 sass 文件夹,但也会找到其他几个文件夹。

出现其他文件夹的原因是,安装包时,它可能需要其他包才能正常运行(Sass 显然需要)。因此,npm 会自动完成查找和安装所有这些依赖项的工作。正如您可能猜到的那样,这些依赖项也可能拥有其他自己的依赖项,因此该过程会重复进行,依此类推,直到我们完成对依赖项树到其最远分支的爬取,并且我们所需的一切都已安装(或者直到我们遇到某种错误,尽管希望不会)。

因此,项目通常会有数百个甚至更多的 node_modules 子文件夹,这些文件夹在磁盘空间方面会迅速累积。node_modules 通常会变得非常庞大。

如果您想知道如何将像 node_modules 这样的大型文件夹提交到项目的存储库,请注意:与 JSON 文件不同,node_modules 文件夹不应提交到 Git,甚至不应共享。事实上,几乎每个 .gitignore 文件(告诉 Git 在跟踪文件时应跳过哪些文件的文件)的示例都包含 node_modules,以确保 Git 从不接触或跟踪它。

那么,您的团队中的其他人如何获得这些包呢?他们从命令行运行 npm install(或简写为 npm i)以直接从源下载依赖项。这样,无需将大量数据提交到或从原始仓库中提取。

安装依赖项时应谨慎

这个庞大的依赖项网络及其远亲依赖项可能会导致这种情况:某种提供有用服务的实用程序库可能会被许多其他包采用,而这些包又会被许多其他包使用,直到最终原始代码最终悄无声息地安装在很大一部分站点和应用程序上。

在安装一个包的过程中,您实际上可能会让很多其他东西进入,这听起来可能很奇怪(如果不是非常可怕的话)。这感觉就像邀请一位新朋友参加您的家庭聚会,然后这位朋友带着 20 位不速之客出现。但这并没有看起来那么奇怪或可怕,原因如下:

  1. 大多数 npm 包都是开源的。您和任何其他人都可以轻松查看内部工作原理,并确切了解包在做什么。您还可以查看注册表 (npmjs.com) 上的包,以查看它安装了多少次、上次更新时间以及其他相关信息。如果某个包相当流行,您可以合理地确定它是安全的。
  2. 存在一个庞大的功能世界,许多项目都需要这些功能。例如,考虑日期格式化、处理 HTTP 请求和响应、节流、防抖或动画。每次在新项目中使用这些内容时,重新发明轮子并手动编码这些内容是没有意义的。
  3. 安装包与在手机上安装应用程序或在 WordPress 网站上安装插件并没有什么不同。不同之处在于,我们不像处理包那样能够深入了解这些应用程序和插件的内部工作原理,以及这些应用程序和插件可能依赖的其他内容。很有可能它们也会以某种方式引入许多较小的包。

当然,在可以安装和执行任意代码的任何环境中,谨慎程度都是一个好主意。请不要误解我的意思。如果我说坏人从未成功利用过此系统,我会撒谎。但是要知道,有很多流程可以防止事情出错。如有疑问,请坚持使用最流行的包,这样您就没事了。

另请注意,npm 会为您运行自动安全审核,这将我们带到本节的最后一点。

什么是 npm audit?

当我们之前安装 sass 时,我们在终端完成时看到了以下消息:

<code>found 0 vulnerabilities</code>

但是,您可能会看到一些警告——就像我下面的旧项目一样。我决定启动它并在它至少闲置了几年后运行 npm install (npm i)。让我们看看它的表现如何:

npm audit 会指出具有已知漏洞的包,该审核会在您安装包时自动运行。如果您看到这样的消息,请不要担心;许多漏洞,尤其是在“中等”类别中的漏洞,带来的实际风险非常低,并且可能仅与非常具体的情况相关。(例如,可能只有包中的一个方法在以特定方式使用时才会使其变得脆弱。)

尽管如此,最好还是解决我们所能解决的问题,这就是 npm audit fix 命令的作用。在末尾添加 fix 会告诉 npm 继续并更新具有某种已知漏洞的任何包的新的次要版本。“次要版本”部分很重要;次要版本不应包含重大更改,而应仅包含更新。这意味着应该安全地以这种方式运行更新,而不会出现破坏项目风险。

如果将包的版本号提高一个次要版本号不起作用,您可以将 --force 标志添加到原始命令中:

npm audit fix --force

但是,这是一个危险的操作。授予 npm “使用强制”权限意味着它现在可以安装主要版本更新以解决漏洞——这意味着它可能会进行重大更改或引入不兼容性。除非存在 npm audit fix 无法解决的关键漏洞,并且您愿意并且能够在之后花费大量时间进行故障排除(如有必要),否则我不建议这样做。

关于此主题的最后一点说明:有时您可以通过删除 node_modules 并重新运行 npm install 来修复 npm 项目中的一些意外问题。这是 npm 的“反复开关”方法,我自己也做过很多次。

接下来的步骤

既然我们已经彻底探索了 npm 幕后工作原理的兔子洞,那么让我们回到实际操作中来,好吗?

← 第 6 章 第 8 章 →

以上是如何安装NPM软件包的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
什么是CSS网格?什么是CSS网格?Apr 30, 2025 pm 03:21 PM

CSS网格是创建复杂,响应式Web布局的强大工具。它简化了设计,提高可访问性并提供了比旧方法更多的控制权。

什么是CSS Flexbox?什么是CSS Flexbox?Apr 30, 2025 pm 03:20 PM

文章讨论了CSS FlexBox,这是一种布局方法,用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法,将其与CSS网格进行了比较,并详细浏览了浏览器支持。

我们如何使用CSS使网站迅速响应?我们如何使用CSS使网站迅速响应?Apr 30, 2025 pm 03:19 PM

本文讨论了使用CSS创建响应网站的技术,包括视口元标签,灵活的网格,流体媒体,媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用,并推荐CSS框架

CSS盒装属性有什么作用?CSS盒装属性有什么作用?Apr 30, 2025 pm 03:18 PM

本文讨论了CSS盒装属性,该属性控制了元素维度的计算方式。它解释了诸如Content-Box,Border-Box和Padding-Box之类的值,以及它们对布局设计和形式对齐的影响。

我们如何使用CSS动画?我们如何使用CSS动画?Apr 30, 2025 pm 03:17 PM

文章讨论使用CSS,关键属性并与JavaScript结合创建动画。主要问题是浏览器兼容性。

我们可以使用CSS向我们的项目添加3D转换吗?我们可以使用CSS向我们的项目添加3D转换吗?Apr 30, 2025 pm 03:16 PM

文章讨论了Web项目的3D转换,关键属性,浏览器兼容性和性能注意事项的讨论。(角色计数:159)

我们如何在CSS中添加梯度?我们如何在CSS中添加梯度?Apr 30, 2025 pm 03:15 PM

文章讨论了使用CSS梯度(线性,径向,重复)来增强网站视觉效果,添加深度,焦点和现代美学。

CSS中的伪元素是什么?CSS中的伪元素是什么?Apr 30, 2025 pm 03:14 PM

文章讨论了CSS中的伪元素,它们在增强HTML样式方面的使用以及与伪级的差异。提供实用的例子。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能