阅读 648

npm install之后发生了什么

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金

npm install之后发生了什么

闲时要有吃紧的心思,忙时要有悠闲的趣味

目录

前言

返回目录

  下载项目后,执行的第一个命令行一般都是 npm install 。在这个过程中可能一帆风顺,也可能遇到大大小小的报错,有时候花点时间各种搜索能解决,可下次遇到还是一头雾水的上网找各种方案尝试解决报错。

  那么,你清楚当你输入 npm instal ,按下 Enter 键之后,究竟发生了什么吗?

正文

一、npm install之后发生了什么

返回目录

  npm install 大概会经过以下几个流程,下面我们就来简单看一下(原图地址)。

install.jpg

  1. npm install执行后,会检查并获取npm配置,优先级为

项目级别的.npmrc文件 > 用户级别的.npmrc文件 > 全局的.npmrc文件 > npm内置的.npmrc文件

.npmrc 文件就是npm的配置文件。查看npm的所有配置, 包括默认配置,可以通过下面的命令:

npm config ls -l
复制代码
  1. 然后检查项目中是否有package-lock.json文件。

  从npm 5.x开始,执行npm install时会自动生成一个 package-lock.json 文件。

package-lock.json 文件精确描述了node_modules 目录下所有的包的树状依赖结构,每个包的版本号都是完全精确的。

  因此npm会先检查项目中是否有 package-lock.json 文件,分为两种情况:

  • 如果有,检查package-lock.jsonpackage.json中声明的依赖是否一致
  • 一致:直接使用 package-lock.json 中声明的依赖,从缓存或者网络中加载依赖
  • 不一致:各个版本的npm处理方式如上图
  • 如果没有,根据package.json递归构建依赖树,然后根据依赖树下载完整的依赖资源,在下载时会检查是否有相关的资源缓存
  • 存在:将缓存资源解压到 node_modules
  • 不存在:从远程仓库下载资源包,并校验完整性,并添加到缓存,同时解压到 node_modules
  1. 最终将下载资源包,存放在缓存目录中;解压资源包到当前项目的node_modules目录;并生成 package-lock.json 文件。

  构建依赖树时,不管是直接依赖还是子依赖,都会按照扁平化的原则,优先将其放置在 node_modules 根目录中(最新的npm规范), 在这个过程中,如果遇到相同的模块,会检查已放置在依赖树中的模块是否符合新模块的版本范围,如果符合,则跳过,不符合,则在当前模块的 node_modules 下放置新模块。

二、npm缓存

返回目录

  在执行 npm installnpm update 命令下载依赖后,除了将依赖包安装在 node_modules 目录下外,还会在本地的缓存目录缓存一份。我们 可以通过以下命令获取缓存位置:

// 获取缓存位置
npm config get cache

// C:\Users\DB\AppData\Roaming\npm-cache
复制代码

  如我的缓存位置在C:\Users\DB\AppData\Roaming\npm-cache下面的_cacache 文件夹中。

  再次安装依赖的时候,会根据 package-lock.json 中存储的 integrity、version、name 信息生成一个唯一的 key,然后拿着key去目录中查找对应的缓存记录,如果有缓存资源,就会找到tar包的hash值,根据 hash 再去找缓存的 tar 包,并把对应的二进制文件解压到相应的项目 node_modules 下面,省去了网络下载资源的开销。

  因此,如果我们可能因为网络原因导致下载的包不完整,这就可能造成删除node_modules重新下载的依旧是问题包,假如删除 node_modules 重新下载问题依旧,此时就需借助命令行清除缓存。

// 清除缓存
npm cache clean --force

复制代码

  不过 _cacache 文件夹中不包含全局安装的包,所以想清除存在问题的包为全局安装包时,需用 npm uninstall -g <package> 解决

三、关于yarn

返回目录

yarn简介:

  yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,正如官方文档中写的,Yarn 是为了弥补 npm 的一些缺陷而出现的。

yarn特点:

  • 速度快
  • yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。
  • 安全
    • 在执行代码之前,yarn 会通过算法校验每个安装包的完整性。
  • 可靠
    • 使用详细、简洁的锁文件格式和明确的安装算法,yarn 能够保证在不同系统上无差异的工作。

四、yarn和npm部分命令对比

返回目录

npmyarn说明
npm inityarn init初始化项目
npm installyarn安装默认依赖
npm install react --saveyarn add react安装某个依赖(react)
npm uninstall react --saveyarn remove react卸载某个依赖(react)
npm update --saveyarn upgrade更新依赖

总结

返回目录

  无论是使用npm 还是 yarn 来管理你的项目依赖,我们都应该知其然更知其所以然,这样才能在项目中跟海的定位及解决问题,不是吗?

参考文档

后记:Hello 小伙伴们,如果觉得本文还不错,记得点个赞或者给个 star,你们的赞和 star 是我编写更多更丰富文章的动力!GitHub 地址

文档协议


db 的文档库db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

文章分类
前端
文章标签