前端工程化基建探索:从内部机制和核心原理了解npm

news2024/12/21 12:41:06

大厂技术 坚持周更 精选好文

前言

本文【前端工程化基建探索】的第2篇,上一篇 前端工程化基建探索(1)前端大佬,你好!

当我们拉取一个前端工程化项目,都会通过npm/Yarn/pnpm 管理工具来安装项目的依赖,运行项目,打包项目,基本上是前端开发三部曲。不知在前端开发过程中你是否考虑过下面几个问题:

1、安装依赖的时候(npm install),做了什么工作?项目中的lock相关文件(package-lock.json)到底是做什么的,有什么作用?

2、我们的应用依赖了公共库 A 和公共库 B,同时公共库 A 也依赖了公共库 B,那么公共库 B 会被多次安装或重复打包吗?

3、当我们的项目依赖出现问题的时候,删除node_modules文件夹和lock相关文件,再重新安装这个操作过程会引发什么问题?

4、怎么建设NPM私有库

5、npm实操建议

6、在项目中安装依赖模块npm install报错

带着以上几个问题的思考,我们一起来探索前端安装依赖相关的知识点~

一、从内部机制和核心原理了解npm

1.1、 npm 的安装机制和背后思想

图片

未命名文件.png

1、npm install 执行之后,首先,检查并获取 npm 配置
这里的优先级为:项目级的 .npmrc 文件 > 用户级的 .npmrc 文件> 全局级的 .npmrc 文件 > npm 内置的 .npmrc 文件

2、检查项目中是否有 package-lock.json 文件

  1. 若有:检查 package-lock.json 和 package.json 中声明的依赖是否一致:一致就直接使用package-lock.json 中的信息,从缓存或网络资源中加载依赖;不一致,则依据npm的版本进行处理

  2. 若无:则根据 package.json 递归构建依赖树,按照构建好的依赖树下载完整的依赖资源,在下载时就会检查是否存在相关资源缓存:存在缓存,就会将缓存内容解压到node_modules 中;不存在缓存,就从npm远程仓库下载包,并会检验包的完整性,随后添加到缓存,解压到node_modules 中生成package-lock.json。

3、最后生成 package-lock.json

这里值得注意的是:npm不同版本在检查 package-lock.json 和 package.json 中声明的依赖是否一致的时候处理是不一样的

  1. npmV5.0.x是根据package-lock.json下载

  2. npmV5.1.0-5.4.2:当package.json声明的依赖版本规范有符合的更新版本时,会按照package.json安装,并更新package-lock.json

  3. npmV5.4.2以上,当package.json声明的依赖版本规范和package-lock.json安装版本兼容,则按照package-lock.json安装,如果不兼容,按照package.json安装,并更新package-lock.json

1.2、 Lock文件

上面说到了npm install 的时候会检查项目中是否有 package-lock.json 文件,Lock文件的出现是为了解决 npm install 的不确定性问题 ,在 npm 5.x 版本新增了 package-lock.json 文件。

它的作用是锁定依赖结构,只要你目录下有 package-lock.json 文件,那么你每次执行 npm install 后生成的 node_modules 目录结构一定是完全相同的。

我们可以打开一个package-lock.json(例如下图)

图片

微信截图_20210622155341.png

看看其文件结构,我们可以看到最外面的两个属性 name 、version 同 package.json 中的 name 和 version ,用于描述当前包名称和版本。

dependencies 是一个对象,对象和 node_modules 中的包结构一一对应,对象的 key 为包名称,值为包的一些描述信息:

  1. version: 包版本 —— 这个包当前安装在 node_modules 中的版本

  2. resolved: 包具体的安装来源

  3. integrity: 包 hash 值,基于 Subresource Integrity 来验证已安装的软件包是否被改动过、是否已失效源

  4. requires: 对应子依赖的依赖,与子依赖的 package.json 中 dependencies的依赖项相同

  5. dependencies: 结构和外层的 dependencies 结构相同,存储安装在子依赖 node_modules 中的依赖包。

这里注意,并不是所有的子依赖都有 dependencies 属性,只有子依赖的依赖和当前已安装在根目录的 node_modules 中的依赖冲突之后,才会有这个属性

那肯定有同学想问,那依赖的结构是什么样的,上面我们说到了,这些资源会按照构建好的依赖树下载

图片

1.3 node_modules 中模块目录结构

嵌套结构

在早期,npm3.x之前,是嵌套结构,就是我们开篇问的我们的应用依赖了公共库 A 和公共库 B,同时公共库 A 也依赖了公共库 B,npm3.x之前公共库 B 会被多次安装 结构如图

图片

未命名文件(1).png

这样的方式优点很明显, node_modules 的结构和 package.json 结构一一对应,层级结构明显,并且保证了每次安装目录结构都是相同的。

但是,试想一下,如果你依赖的模块非常之多,你的 node_modules 将非常庞大,嵌套层级非常之深:

  1. 在不同层级的依赖中,可能引用了同一个模块,导致大量冗余。

  2. 在 Windows 系统中,文件路径最大长度为260个字符,嵌套层级过深可能导致不可预知的问题

扁平结构

为了解决以上问题,NPM 在 3.x 版本做了一次较大更新。其将早期的嵌套结构改为扁平结构: 安装模块时,不管其是直接依赖还是子依赖的依赖,优先将其安装在 node_modules 根目录。还是上面的依赖结构,我们在执行 npm install 后将得到下面的目录结构

图片

image.png

图片对应的,如果我们在项目代码中引用了一个模块,模块查找流程如下:

  1. 在当前模块路径下搜索

  2. 在当前模块 node_modules 路径下搜素

  3. 在上级模块的 node_modules 路径下搜索

  4. 直到搜索到全局路径中的 node_modules

但是有一种情况是,你的应用中,没有直接依赖公共库D,比如公共库C和公共库B依赖了不同版本的公共库D

图片

未命名文件(1)(2).png

所以 npm 3.x 版本并未完全解决老版本的模块冗余问题,甚至还会带来新的问题,因为在执行 npm install 的时候,按照 package.json 里依赖的顺序依次解析,公共库B和公共库C在 package.json的放置顺序则决定了 node_modules 的依赖结构。

1.3、 npm 缓存机制

在执行 npm install 或 npm update命令下载依赖后,除了将依赖包安装在node_modules 目录下外,还会在本地的缓存目录缓存一份。

通过

npm config get cache 

命令可以查询到:.npm/_cacache 目录

图片

微信截图_20210622173746.png

图片

微信截图_20210622173956.png

  1. content-v2 里面基本都是一些二进制文件,存储 tar包的缓存

  2. index-v5 文件中,存储tar包的 hash

npm 在执行安装时,可以根据 package-lock.json 中存储的 integrity、version、name 生成一个唯一的 key 对应到 index-v5 目录下的缓存记录,从而找到 tar包的 hash,然后根据 hash 再去找缓存的 tar包,通过pacote爸对应的二进制文件解压到对应项目的 node_modules 下面,省去了网络下载资源的开销。

注意:以上的缓存策略是从 npm v5 版本开始的,在 npm v5 版本之前,每个缓存的模块在 ~/.npm 文件夹中以模块名的形式直接存储,储存结构是{cache}/{name}/{version}

npm 提供了几个命令来管理缓存数据:

  1. npm cache add: 官方解释说这个命令主要是 npm 内部使用,但是也可以用来手动给一个指定的 package 添加缓存。

  2. npm cache clean: 删除缓存目录下的所有数据,为了保证缓存数据的完整性,需要加上 --force 参数

  3. npm cache verify: 验证缓存数据的有效性和完整性,清理垃圾数据

趣谈前端

,赞 19

二、 NPM 私有仓库建设指南

2.1、 npm 中的源(registry)

npm 中的源(registry),其实就是一个查询服务。以 npmjs.org 为例,它的查询服务网址是 https://registry.npmjs.org/ 这个网址后面跟上模块名,就会得到一个 JSON 对象,里面是该模块所有版本的信息。

在日常开发中,我们也常常会 发现直接用 npm 安装库有时候非常慢,容易安装失败,因为npm安装插件是从国外服务器下载,受网络的影响比较大,可能会出现异常。最好的解决方案是使用淘宝镜像 cnpm替代npm,正如它官网所描述

这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

我们可以直接全局使用cnpm命令行工具代替默认的npm

$ npm install -g cnpm --registry=https://registry.npmmirror.com

当然你可能不喜欢用cnpm命令,为了方便开发,我们可以把npm的源设置为淘宝镜像

 $ npm config set registry http://registry.npmmirror.com

2.2、 为什么要搭建npm私有库

当我们业务规模达到一定程度的时候,可能会有一些自己公司私有的的UI的封装或者模块封装,不想通过npm发布,但是又想在一些项目和其他团队共享使用,而且我们不想将公共模块是复制到各个项目中来使用。这时候搭建NPM私有库就显得很有必要

  • npm私有库只针对公司内部局域网开放,作为内部前端资产,不对外公开,也算是公司前端团队的一个技术亮点

  • 速度比在直接在npm下载更快,甚至是比淘宝源更快,私有库能够将包资源进行缓存,响应的话会加快下载速度

  • 对于发布和下载npm包配置权限管理

2.3、 Verdaccio搭建私有npm仓库

搭建npm私有库的方式很多,笔者推荐一款简单的轻量级私有 NPM 仓库(https://verdaccio.org)

它的原理就是我们平时使用npm publish进行发布时,上传的仓库默认地址是npm,通过Verdaccio工具在本地新建一个仓库地址,再把本地的默认上传仓库地址切换到本地仓库地址即可。当npm install时没有找到本地的仓库,则Verdaccio默认配置中会从npm中央仓库下载。当然它还可以 设置钉钉机器人推送发布消息呢!

具体安装部署细节可以移步到Verdaccio官网

三、 NPM 实操建议

(1)推荐使用 npm v5.4.2 以上的 npm 版本,享受npm 的最基本先进性和稳定性。

(2)项目的第一次搭建使用 npm install 安装依赖包,并提交 package.json、package-lock.json,当然要排除 node_modules 目录。

(3)其他项目成员首次 checkout/clone 项目代码后,执行一次 npm install 安装依赖包。

(4)对于升级依赖包的需求:

  • 依靠 npm update 命令升级到新的小版本;

  • 依靠 npm install @ (指定版本)升级大版本;

  • 也可以手动修改 package.json 中版本号,并执行 npm install 来升级版本;

  • 本地验证升级后新版本无问题(比如element各个版本有些不兼容的情况)

(5)对于降级依赖包的需求:执行 npm install @ (指定版本)命令,指定版本

(6)删除项目中某些依赖:执行 npm uninstall 命令, 或者手动操作 package.json删除依赖。

(7)任何团队成员提交 package.json、package-lock.json 更新后,其他成员应该拉取代码后,执行 npm install 更新依赖。

(8)如果 package-lock.json 出现冲突或问题,建议将本地的 package-lock.json 文件删除,引入远程的 package-lock.json 文件和 package.json,再执行 npm install 命令。

四、 在项目中安装依赖模块npm install报错集合

4.1、 node_modules 删除无权限

图片

image.png

解决办法:

npm install rimraf -g
rimraf node_modules 

4.2、 Error: Cannot find module ‘node-sass’

sass-loader@8.0.0以上版本的时候不需要再安装node-sass, 有时候也会报没有python,也是因为node-sass 需要这个环境导致

图片

image.png

解决办法:

npm install --global --production windows-build-tools
npm install node-sass --save-dev

当然大多数时候是你电脑本机的node版本和项目里的 node-sass包之间的版本存在兼容问题,可以通过node-sass查看版本支持情况

图片

image.png

4.3、 评论区待补充。。。

最后

本文从内部机制和核心原理了解npm,和简单了解了私服的建设,对 npm 一些常见使用误区以及使用技巧进行了分析,评论区也可以把你在安装删除的过程中遇到问题,一同分享和解决的办法~

如果想学习更多H5游戏webpacknodegulpcss3javascriptnodeJScanvas数据可视化等前端知识和实战,欢迎在《趣谈前端》加入我们的技术群一起学习讨论,共同探索前端的边界。

图片

从零搭建全栈可视化大屏制作平台V6.Dooring

从零设计可视化大屏搭建引擎

Dooring可视化搭建平台数据源设计剖析

可视化搭建的一些思考和实践

基于Koa + React + TS从零开发全栈文档编辑器(进阶实战

点个在看你最好看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1493.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大学解惑06 - 要求输入框内只能输入2位以内小数,怎么做?

请听题:有一个输入框,准备用于计算使用,要求点击“校验”按钮的时候进行验证,必须输入数字,并且只能是2位以内的小数,如果输入不合法,请给出提示,如果输入合法通过验证,则…

又是一篇教你摸鱼的文章,用Python实现自动发送周报给老板

前言 有没有哪个同志跟我一样,每周都要写工作周报 像我这种记性不好的,一个月四周忘记三次 索性就用Python写个小工具,让它每周帮我给老板发周报~ Github: Weekday 小工具 提出目标 源码.资料.素材.点击领取即可 想有一个工具能发邮件 目…

ARM 汇编基础

一、ARM架构 ARM芯片属于精简指令集计算机(RISC:Reduced Instruction Set Computing),它所用的指令比较简单,有如下特点: 对内存只有读、写指令对于数据的运算是在CPU内部实现使用RISC指令的CPU复杂度小一点,易于设计…

WebShell箱子简介与原理

今天继续给大家介绍渗透测试相关知识,本文主要内容是WebShell箱子简介与原理。 免责声明: 本文所介绍的内容仅做学习交流使用,严禁利用文中技术进行非法行为,否则造成一切严重后果自负! 再次强调:严禁对未授…

【面试】【项目】谷粒商城

视频链接 项目调查 这项目是这么多免费视频里最好的了。但依旧是demo。 最好还是买慕课网上的实战课,那些老师都有丰富的开发经验,有经验跟没经验讲的课是完全不同的。 谷粒商城我觉得是不low的,我很菜,毕业一年半被多次辞退&a…

数据结构之-【排序】

目录 排序 ⚡️冒泡排序 ⚡️选择排序 ⚡️插入排序 ⚡️堆排序 ⚡️归并排序 ⚡️快速排序 🏳️‍🌈排序 将数字从小到大的顺序排列 🔴冒泡排序 「冒泡排序」重复"从序列右边开始比较相邻两个数字的大小,再根据结果交换两个…

国产蓝牙耳机哪个牌子好?国产蓝牙耳机质量排行榜

随着3.5 mm耳机插孔被淘汰,特别是5G时代,让手机的内部结构变得越来越小,要将耳机插口塞进一个新的插口,无疑是一件非常困难的事情,而随着蓝牙技术的不断进步,蓝牙耳机也逐渐成为了如今人们配戴手机的首选&a…

Revit中阀门在项目中不可用无法与管道连接?

一、Revit中阀门在项目中不可用的问题 在项目中放置阀门时,有时候不可用,会出现如图1所示问题,无法与管道连接。 出现上图显示问题是因为在编辑族的时候,阀门两边的连接件原心没有完全重合。打开编辑族界面,可以看到如…

怎么辨别哪些才是真的低代码开发平台?

怎么辨别哪些才是真的低代码开发平台?第一次看到这个问题时,我就知道为什么有人会这么问了,目前低代码市场龙蛇混杂,普通人很难分辨出“真”低代码。所以这个问题中“真正”二字最为重要,圈起来,下面我们正…

【产品新体验】CSDN开发云·云IDE使用教程

【产品新体验】CSDN开发云云IDE使用教程1、初识云IDE1.1 拉去git项目1.2 密钥管理2、整体分析云IDE产品介绍 云IDE使用教程 免费使用地址:点击【云IDE】,即可开始创建工作空间啦~ CSDN最新产品【云IDE】来啦!【云IDE】将为各位技术er一键秒级…

No6-3.从零搭建spring-cloud-alibaba微服务框架,实现资源端用户认证与授权等(三,no6-3)

代码地址与接口看总目录:【学习笔记】记录冷冷-pig项目的学习过程,大概包括Authorization Server、springcloud、Mybatis Plus~~~_清晨敲代码的博客-CSDN博客 之前只零碎的学习过spring-cloud-alibaba,并没有全面了解过,这次学习p…

【Python】入门,总结与拾遗

前言 根据我的实践经验来看,对于有编程基础(如C语言)的同学来说,python入门应该很简单,而且加上官方文档做得非常好,所以个人建议python的学习主要去参考官网。本博客主要是记录那些容易忽略的关键点以及对…

蓝桥杯单片机第七届省赛题详细讲解(温度记录器)

看之前强烈建议先自己做一遍!!!演示效果题目讲解代码main.cds1302.cds1302.honewire.conewire.h工程文件演示效果 题目讲解 首先我们从系统框图看起: 做题之前要做的是把系统框图里面的各个模块先提前调试好!&#x…

StarRocks 的学习笔记

StarRocks 的学习笔记 文章目录StarRocks 的学习笔记1. 介绍1.1 StarRocks 特性1.2 使用场景1.3 OLAP 多维分析1.4 实时数据仓库1.5 高并发查询1.6 统一分析2. 系统架构2.1 StarRocks架构2.2 StarRocks业务架构2.3 StarRocks 数据生态2.4 *数据管理3. 特性3.1 MPP分布式执行框架…

ES6中的set与map

文章目录1.set1.1创建set集合1.2 如何对set集合进行后续操作1.3 如何与数组进行相互转换1.4 如何遍历1.5set的应用2.map集合2.1 如何创建map2.2 如何进行后续操作2.3 如何与数组转换2.4 遍历一直以来,JS只能使用数组和对象来保存多个数据,缺乏像其他语言…

介绍document部分自带的方法及属性,场景使用例如倒计时等

适用场景页面不显示(不看)触发方法停止运行逻辑,页面显示(看)触发方法继续运行逻辑。 (例如倒计时) 操作手法触发,浏览器多页签切换时触发,或者当前页隐藏浏览器&#xf…

飞象星球落地舟山36所学校 双师课堂化解课后服务区域资源差异

傍晚的阳光正好,此时舟山二小北校区五年级学生周陈延正紧盯大屏幕,沉醉在《航天探秘》飞象星球双师素质课堂带来的知识奥义中。作为浙江极具特色的海岛城市,舟山正进行着有关课后服务领域的新探索,双师素质课堂便是“千岛之城”舟…

VSCODE联合ModelSim语法检错

Vscode联合ModelSim检错 一、Vscode配置 首先在 vs code 中安装支持 Verilog 的插件: 在 vs code 的 Extension 中搜索 Verilog,安装如下图所示的插件; 二、ModelSim语法检查器检查 Modelsim的安装破解本文不再赘述,可选的Mod…

【初阶数据结构】第一篇——时间复杂度和空间复杂度详解(C描述)

文章目录前言什么是数据结构?什么是算法?1. 算法效率1.1如何衡量一个算法的好坏1.2 算法的复杂度1.2 复杂度在校招中的考察2. 时间复杂度2.1 时间复杂度的概念2.2 大O的渐进表示法2.3 常见时间复杂度计算举例例1双重循环例2. 多未知数例3. 常数次循环例4…

【深度学习】卷积神经网络之双阶段目标检测|R-CNN、SPP-Net、Fast-RCNN、Faster-RCNN、R-FCN

文章目录基本概念一、R-CNN1. 网络结构2. 训练流程3. 测试阶段5.RNN存在的问题二、SPP-Net1. 网络结构2. 基础知识共享卷积计算金字塔池化 Spatial Pyramid Pooling3. 训练流程4. 测试流程5. 存在问题三、 Fast R-CNN1. 网络结构2. 基础知识感兴趣区域池化层 (ROI pooling)多任…