作为前端工程师你真的知道npminstall原理么

1、作为前端工程师你真的知道npm install原理么？做前端工程师得你，一定经常会使用到npm install,那你真的了解npm install执行之后的流程细节么?嵌套结构我们都知道，执行npm install后，依赖包被安装到了 node_modules，下 面我们来具体了解下，npm将依赖包安装到node_modules的具体机制是什 么。在npm的早期版本，npm处理依赖的方式简单粗暴，以递归的形式，严格 按照package.json结构以及子依前端要学好必须每天坚持学习。为了方便大 家的交流学习，也是创建了一个群每天都有分享学习方法和专业老师直播前端课 程，这个扣裙首先是132中间

2、是667最后是127前端学习零基础想要学习的 同学欢迎加入，如果只是凑热闹就不要来了!赖包的package.json结构将依 赖安装到他们各自的node_modules中。直到有子依赖包不在依赖其他模块。举个例子，我们的模块my-叩p现在依赖了两个模块：buffer, ignore ：困n日卬日：口困n日卬日：口ignore是一个纯JS模块，不依赖任何其他模块，而buffer又依赖了下面两 个模块：base64-js、buffer,namebuffer,门日口已“己nE已与：:券H,base64-j5: ,hAI.e.23那么，执行npm install后，得到的nod

3、e_modules中模块目录结构就是下面这样的。这样的方式优点很明显，node_modules的结构和package.json结构对应，层级结构明显，并且保证了每次安装目录结构都是相同的。但是，试想一下，如果你依赖的模块非常之多，你的node_modules将非常庞大，嵌套层级非常之深：在不同层级的依赖中，可能引用了同一个模块，导致大量冗余。在Windows系统中，文件路径最大长度为260个字符，嵌套层级过深可能导致不可预知的问题。扁平结构b59e一他1户二为了解决以上问题，NPMb59e一他1户二为了解决以上问题，NPM在3.x版本做了一次较大更新。其将早期的嵌套结构改为扁平结构:安装模块时

4、，不管其是直接依赖还是子依赖的依赖，优先将其安装在node_modules 根目录。还是上面的依赖结构，我们在执行npm install后将得到下面的目录结构:y * node_modules : base64-js buffer ieee7S4 ignore此时我们若在模块中又依赖了 base64-js1.0.1版本:当安装到相同模块时，判断已安装的模块版本是否符合新模块的版本范围，如果符合则跳过，不符合则在当前模块的node_modules下安装该模块。bug她电此时，我们在执行npm installbug她电此时，我们在执行npm install后将得到下面的目录结构：对应的，如果我们在

5、项目代码中引用了一个模块，模块查找流程如下:在当前模块路径下搜索 在当前模块node_modules路径下搜素在上级模块的node_modules路径下搜索直到搜索到全局路径中的node_modules假设我们又依赖了一个包buffer2A5.4.3，而它依赖了包base64-js1.0.3 ,则此时的安装结构是下面这样的：所以npm 3.x版本并未完全解决老版本的模块冗余问题，甚至还会带来新的问题。试想一下，你的APP假设没有依赖base64-js1.0.1版本，而你同时依赖了依赖不同base64-js版本的buffer和buffer2。由于在执行npm install的 时候，按照pack

6、age.json里依赖的顺序依次解析，则buffer和buffer2在 package.json的放置顺序则决定了 node_modules的依赖结构：先依赖buffer2 ：先依赖buffer ：1,1,1,1,另外，为了让开发者在安全的前提下使用最新的依赖包，我们在package.json 通常只会锁定大版本，这意味着在某些依赖包小版本更新后，同样可能造成依赖 结构的改动，依赖结构的不确定性可能会给程序带来不可预知的问题。为了解决npm install的不确定性问题，在npm 5.x版本新增了 package-lock.json文件，而安装方式还沿用了 npm 3.x的扁平化的方式。pac

7、kage-lock.json的作用是锁定依赖结构，即只要你目录下有package-lock.json文件，那么你每次执行npm install后生成的 node_modules目录结构一定是完全相同的。例如，我们有如下的依赖结构：name在执行 npm install 后生成的 package-lock.json name在执行 npm install 后生成的 package-lock.json 如下:蛇口丑由九口：1日” ： buf-fer:.4.3二 .工.4,vcrsian: 1.6. 0vcrsian: 1.6. 0d史pendEncic5: 我们来具体看看上面的结构:口角营仲皿，F

8、EWversion:rcioris1:L曲Mvr我们来具体看看上面的结构:口角营仲皿，FEWversion:rcioris1:L曲Mvr动351币L1.n-rf/iHiff e T/- /bwff-er - 5d *.3 rteatwGiWFWic fie代v4 f alert-即口上可七名：httbe:/re最外面的两个属性name、version同package.json中的name和version，用于描述当前包名称和版本。dependencies是一个对象，对象和node_modules中的包结构对应，对象的key为包名称，值为包的一些描述信息：version :包版本这个包当前安装在

9、node_modules中的版本resolved :包具体的安装来源integrity :包hash值，基于Subresource Integrity来验证已安装的软件包是否被改动过、是否已失效requires :对应子依赖的依赖，与子依赖的package.json中dependencies的依赖项相同。dependencies :结构和外层的dependencies结构相同，存储安装在子依赖 node_modules中的依赖包。这里注意，并不是所有的子依赖都有dependencies属性，只有子依赖的依赖 和当前已安装在根目录的node_modules中的依赖冲突之后，才会有这个属性。例如，

10、回顾下上面的依赖关系：1al一产 二认1al一产 二认FF的打ar餐悠4bn仔上径飞.4.3jit! 1,0,1我们在my-叩p中依赖的base64-js1.0.1版本与buffer中依赖的 base64-jsA1.0.2 发生冲突，所以 base64-js1.0.1 需要安装在 buffer 包 的 node_modules 中，对应了 package-lock.json 中 buffer 的 dependencies属性。这也对应了 npm对依赖的扁平化处理方式。所以，根据上面的分析，package-lock.json文件和node_modules目录 结构是一对应的，即项目目录下存在pa

11、ckage-lock.json可以让每次安装生 成的依赖目录结构保持相同。另外，项目中使用了 package-lock.json可以显著加速依赖安装时间。我们使用 npm i -timing=true -loglevel=verbose 命令可以看至U npm install的完整过程，下面我们来对比下使用lock文件和不使用lock文件的差 别。在对比前先清理下npm缓存。不使用lock文件:-losglevelverlwsejlnpiri i ri mintrue loglevel=verbose使用lock文件:lishiqi-b-ogor- -/De口口 d cor 己 nd/m/gi

12、th u b/c od e-sta ts, codfl-slffLs 再七：(Muter) X -losglevelverlwsejlnpiri i ri mintrue loglevel=verbose使用lock文件:lishiqi-b-ogor- -/De口口 d cor 己 nd/m/gith u b/c od e-sta ts, codfl-slffLs 再七：(Muter) X 叩n i -t：indnt：rueT cod-s1：at gLL：Fu$Hr) X fipm i -HHigMrue -logletvel4wrhosaInfoB l fctchHrtadata:r.loa

13、dAlLEpEl ntaldealT rceinfoinfoclt ct cli elf usirm usin叩吁占g5 ter lBafl2LeeddeZ6efl ：”门L co4e-$tdt5(irhttps : /regi stry. npin j s . orgf base64- j/-/base64-j & -1.6. ltgz -r index-v5然后我们将json格式化:Key； pmuotu;门一wiunifest: http%: /r吕士导七,npiwj 导.口rg/。自与后64-津导宅E4-js-i. H 1 4自三:导“irrtegritV“ ： “Mhm5E2-t?E

14、kH)(w，LsbLJcnTRS3MFHM7M4:，y9k：LinKDHPTEyeuen：HSh“egV+/lP+mhpWgiurnwE。time“ b undlED已e由gdertu 上把5：干己1$“ DieurUuDumd 已加匚 iu5 g/Dds64-js7-，bs：E亳4-35 -1 .白1 七用工“nF”_intPE:ity ” ； 15由己1一士5由月，工丁7同工？4711111闻3/制口+口腐品=*.iesolveicl1H : Jhttp!s:/reEi 三七ry 作pE，上面的 _shasum 属性 6926d1b194fbe737b8eed513756de2fcda7e

15、a408即为tar包的hash , hash的前几位6926即为缓存的前两层目录，我们进去这个目录果然找到的压缩后的依赖包： content-v2 cd shalf shal cd 69/26t Z6 Isdlbl94fbc737b8eed513756de2fcda7ea408T 26 file dlbl94fbc737b8eed513756de2fcda7ea408dlbl94fbc737b8eed513756deZfcda7ea408: gzip co叩rested data,以上的缓存策略是从npm v5版本开始的，在npm v5版本之前，每个缓存 的模块在/.npm文件夹中以模块名的形

16、式直接存储，储存结构是 cache/name/version。npm提供了几个命令来管理缓存数据: npm cache add :官方解释说这个命令主要是npm内部使用，但是也可以用 来手动给一个指定的package添加缓存。npm cache clean :删除缓存目录下的所有数据，为了保证缓存数据的完整性， 需要加上-force参数。npm cache verify :验证缓存数据的有效性和完整性，清理垃圾数据。基于缓存数据，npm提供了离线安装模式，分别有以下几种：-prefer-offline :优先使用缓存数据，如果没有匹配的缓存数据，则从远程仓 库下载。-prefer-online

17、 :优先使用网络数据，如果网络数据请求失败，再去请求缓存 数据，这种模式可以及时获取最新的模块。-offline :不请求网络，直接使用缓存数据，一旦缓存数据不存在，则安装失败。文件完整性上面我们多次提到了文件完整性，那么什么是文件完整性校验呢？在下载依赖包之前，我们一般就能拿到npm对该依赖包计算的hash值，例如我们执行npm info命令，紧跟tarball(下载链接)的就是shasum(hash):.presLg4.17,1 | 苫 | dtps: M | versions: 263Fast, QnopjiiMmterl, mininaUst we-b frmeuDrk HYPERLI

18、NK http:/BKprfussiSt http:/BKprfussiSt cor/kywprd$: jcpM5fr frwQf SArntra,叫*, 锣1,r窘辛*fyl. nayter, ap-pt 中诚distJ*巾己l*: https： /Ffigist ry. npoij $.urg/eiprss/Verpre55-4.17.1. rgr.shasum: 44Slf白能的cfSH耻2英%db5d6f9酷4cIMd*阱 Mm3s：aqjvpt： “3.了arra-flatten: 1.1.1tody-parser: LrE9.B-.and 5 nor噂/cnHtfcurli T,协

19、？finsescjpe-html: -1.0.3d*阱 Mm3s：aqjvpt： “3.了arra-flatten: 1.1.1tody-parser: LrE9.B-.and 5 nor噂/cnHtfcurli T,协？finsescjpe-html: -1.0.3fr呷：1.4.1mergccnt-ent-dilsppsitism B*53 cwkie： 9.4.fl CBFit-erit-tpe : f 1 - 95d ebug: 2.6,9ccoKle-signture l.?.G depd:mainly iMrs:-dcujwil$inonte-thiiiFdinifeob-jasn

20、ell -aikal 4mlkfral. rogcrsnj 11. tom_0 4h=2，in庙_4用户下载依赖包到本地后，需要确定在下载过程中没有出现错误，所以在下载完 成之后需要在本地在计算一次文件的hash值，如果两个hash值是相同的， 则确保下载的依赖是完整的，如果不同，则进行重新下载。整体流程好了，我们再来整体总结下上面的流程：检查.npmrc文件：优先级为：项目级的.npmrc文件 用户级的.npmrc文件 全局级的.npmrc文件 npm内置的.npmrc文件检查项目中有无lock文件。无lock文件：从npm远程仓库获取包信息根据package.json构建依赖树，构建过程:

21、 构建依赖树时，不管其是直接依赖还是子依赖的依赖，优先将其放置在node_modules 根目录。当遇到相同模块时，判断已放置在依赖树的模块版本是否符合新模块的版本范围， 如果符合则跳过，不符合则在当前模块的node_modules下放置该模块。注意这一步只是确定逻辑上的依赖树，并非真正的安装，后面会根据这个依赖结构去下载或拿到缓存中的依赖包在缓存中依次查找依赖树中的每个包不存在缓存：从npm远程仓库下载包校验包的完整性校验不通过：重新下载校验通过：将下载的包复制到npm缓存目录将下载的包按照依赖结构解压到node_modules存在缓存：将缓存按照依赖结构解压到node_modules将包解

22、压到node_modules生成lock文件 有lock文件：检查package.json中的依赖版本是否和package-lock.json中的依赖有冲 突。如果没有冲突，直接跳过获取包信息、构建依赖树过程，开始在缓存中查找包信 息，后续过程相同上面的过程简要描述了 npm install的大概过程，这个过程还包含了一些其他 的操作，例如执行你定义的一些生命周期函数，你可以执行npm install package -timing=true -loglevel=verbose来查看某个包具体的安装流程 和细节。yarnyarn是在2016年发布的，那时npm还处于V3时期，那时候还没有 pa

23、ckage-lock.json文件，就像上面我们提到的：不稳定性、安装速度慢等缺点 经常会受到广大开发者吐槽。此时，yarn诞生：上面是官网提到的yarn的优点，在那个时候还是非常吸引人的。当然，后来 npm也意识到了自己的问题，进行了很多次优化，在后面的优化（lock文件、 缓存、默认-s）中，我们多多少少能看到yarn的影子，可见yarn的设计还 是非常优秀的。yarn也是采用的是npm v3的扁平结构来管理依赖，安装依赖后默认会生成一个yarn.lock文件，还是上面的依赖关系，我们看看yarn.lock的结构：y已n iDcrkfi七THIS IS AN AU70GENERATED F

24、ILE BO NOT EDIT THIS FILE DIRECTLVy已n iDcrkfi七THIS IS AN AU70GENERATED FILE BO NOT EDIT THIS FILE DIRECTLV,lbase-64-ism .0.1:version l.e.lresolved 11 htps: /registry .y ar n pkg-com/has eE4-js/- /ba se64-j s - gz#692EdlbL94-Fbc7B7b8e ec|base64-js(?Al0B2;，65丁断电工式3斗匕：1门口初I KHkU*t Hf 1二 L 西1+PiT-工 pClf;i5tryydm匕七口iP/igADrEJ - fignnrE，6