小知识,大挑战!本文正在参与「程序员必备小知识」创作活动
本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
npm install之后发生了什么
闲时要有吃紧的心思,忙时要有悠闲的趣味
前言
下载项目后,执行的第一个命令行一般都是 npm install
。在这个过程中可能一帆风顺,也可能遇到大大小小的报错,有时候花点时间各种搜索能解决,可下次遇到还是一头雾水的上网找各种方案尝试解决报错。
那么,你清楚当你输入 npm instal
,按下 Enter
键之后,究竟发生了什么吗?
正文
一、npm install之后发生了什么
npm install 大概会经过以下几个流程,下面我们就来简单看一下(原图地址)。
- npm install执行后,会检查并获取npm配置,优先级为
项目级别的.npmrc文件 > 用户级别的.npmrc文件 > 全局的.npmrc文件 > npm内置的.npmrc文件
.npmrc
文件就是npm的配置文件。查看npm的所有配置, 包括默认配置,可以通过下面的命令:
npm config ls -l
- 然后检查项目中是否有
package-lock.json
文件。
从npm 5.x开始,执行npm install时会自动生成一个 package-lock.json
文件。
package-lock.json
文件精确描述了node_modules 目录下所有的包的树状依赖结构,每个包的版本号都是完全精确的。
因此npm会先检查项目中是否有 package-lock.json
文件,分为两种情况:
- 如果有,检查
package-lock.json
和package.json
中声明的依赖是否一致
- 一致:直接使用
package-lock.json
中声明的依赖,从缓存或者网络中加载依赖 - 不一致:各个版本的npm处理方式如上图
- 如果没有,根据
package.json
递归构建依赖树,然后根据依赖树下载完整的依赖资源,在下载时会检查是否有相关的资源缓存
- 存在:将缓存资源解压到
node_modules
中 - 不存在:从远程仓库下载资源包,并校验完整性,并添加到缓存,同时解压到
node_modules
中
- 最终将下载资源包,存放在缓存目录中;解压资源包到当前项目的
node_modules
目录;并生成package-lock.json
文件。
构建依赖树时,不管是直接依赖还是子依赖,都会按照扁平化的原则,优先将其放置在 node_modules
根目录中(最新的npm规范), 在这个过程中,如果遇到相同的模块,会检查已放置在依赖树中的模块是否符合新模块的版本范围,如果符合,则跳过,不符合,则在当前模块的 node_modules
下放置新模块。
二、npm缓存
在执行 npm install
或 npm 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部分命令对比
npm | yarn | 说明 |
---|---|---|
npm init | yarn init | 初始化项目 |
npm install | yarn | 安装默认依赖 |
npm install react --save | yarn add react | 安装某个依赖(react) |
npm uninstall react --save | yarn remove react | 卸载某个依赖(react) |
npm update --save | yarn upgrade | 更新依赖 |
总结
无论是使用npm 还是 yarn 来管理你的项目依赖,我们都应该知其然更知其所以然,这样才能在项目中跟海的定位及解决问题,不是吗?
参考文档
- npm 模块安装机制简介 | 阮一峰
- npm install 原理分析 | ConardLi
- npm安装机制 | CSDN - h03580
- 前端工程化(5):你所需要的npm知识储备都在这了| 掘金 - Tiboo
- 前端工程师应该知道的yarn知识 | 掘金 - 于是乎_
后记:Hello 小伙伴们,如果觉得本文还不错,记得点个赞或者给个 star,你们的赞和 star 是我编写更多更丰富文章的动力!GitHub 地址
文档协议
db 的文档库 由 db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。