关于前端脚手架的依赖升级和去风险版本可能遇到的问题

一、升级依赖版本

1、检查过时依赖

npm outdated

2、根据具体情况,选择安全更新或全部更新到最新版本

2.1 安全更新(不破坏依赖间的联系)

npm update

2.2 全部更新到最新版本

首先输入命令:

npx npm-check-updates -u

执行完后,如果之前没安装,会提示安装 npm-check-updates 插件,输入 y 同意。

运行完成后会在控制台列出各依赖即将升级的情况,可以选择执行 npm install 来进行升级操作。

一旦执行升级操作,因为会忽略各依赖间的联系性并统一升级到最新版本,所以可能会出现升级失败的情况,此时会询问用户是否确定并加上 --force 强制升级,如果你仍然想升级,直接输入强制升级即可。

npm install --force

3、升级完成

二、npm安装依赖遇到冲突的peerDependencies

在新版本的npm中,默认情况下,npm install遇到冲突的peerDependencies时会失败。

解决办法:

使用 --force 或 --legacy-peer-deps 可解决这种情况。

--force:会无视冲突,并强制获取远端npm库资源,当有资源冲突时覆盖掉原先的版本。

--legacy-peer-deps:安装时忽略所有peerDependencies,忽视依赖冲突,采用npm版本4到版本6的样式去安装依赖,已有的依赖不会覆盖。

建议用--legacy-peer-deps 比较保险一点

在终端重新安装即可解决,会重新生成没有冲突的 package-lock.json 文件

npm install --legacy-peer-deps

三、前端脚手架的间接依赖升级为无风险版本

由于blackduck对于非java项目会对源代码进行依赖扫描,因此低版本webpack使用的开发依赖devdependencies中的间接依赖容易产生漏洞告警。

以下提供升级建议:

1、在组件库中查询间接依赖,库中存在无风险版本情况

npm ls @xxx

使用 npm ls <依赖>  这条命令,会搜索出指定依赖结构,因间接依赖低版本 @xxx 导致漏洞告警,修复建议以组件库建议为准。

根据组件库无风险版本,在 package-lock.json 文件中指定间接依赖的大版本或具体版本号,使用npm update <依赖> 升级指定依赖

npm update @xxx

将package-lock.json替换至代码库中

如发生npm install后 package-lock.json 发生变化,请升级npm版本至最新

不同 npm 版本下 npm i 的规则

  • npm 5.0.x 版本:不管 package.json 中依赖是否有更新,npm i 都会根据 package-lock.json 下载。针对这种安装策略,有人提出了这个 issue - #16866 ,然后就演变成了 5.1.0 版本后的规则。

  • 5.1.0 版本后:当 package.json 中的依赖项有新版本时,npm install 会无视 package-lock.json 去下载新版本的依赖项并且更新 package-lock.json。针对这种安装策略,又有人提出了一个 issue - #17979 ,参考 npm 贡献者 iarna 的评论,得出 5.4.2 版本后的规则。

  • 5.4.2 版本后:
  • 如果只有一个 package.json 文件,运行 npm i 会根据它生成一个 package-lock.json 文件。
  • 如果 package.json 的 semver-range version 和 package-lock.json 中版本兼容,即使此时 package.json 中有新的版本,执行 npm i 也还是会根据 package-lock.json 下载 - 实践场景1。
  •  如果手动修改了 package.json 的 version ranges,且和 package-lock.json 中版本不兼容,那么执行 npm i 时 package-lock.json 将会更新到兼容 package.json 的版本 - 实践场景2。

2、间接依赖的最新版本仍为风险版本或所有版本均为风险版本情况

在流水线的编译前脚本中的npm run build 后添加以下命令,确保开发依赖不进入生产。

rm -rf node_modulesnpm install --production

 

四、直接依赖漏洞修复

npm audit

该命令是npm6新增的,可以允许开发人员分析复杂的代码并查明特定的漏洞。

npm audit 需要包 package.json 和 package-lock.json 文件。它是通过分析 package-lock.json 文件,继而扫描我们的包分析是否包含漏洞的。

返回的漏洞数据来源于 Github Advisory Database。

使用该命令必须用npm原始源,如果有已知漏洞,会展示该漏洞的信息(包括漏洞涉及问题、漏洞危险等级、所在依赖包、依赖包的依赖层级、详细信息等)

npm audit 衍生命令

# 扫描项目漏洞把不安全的依赖项自动更新到兼容性版本
npm audit fix# 在不修改 node_modules 的情况下执行 audit fix,仍然会更改 pkglock
npm audit fix --package-lock-only# 跳过更新 devDependencies
npm audit fix --only=prod# 强制执行 audit fix 安装最新的依赖项(toplevel)
npm audit fix --force# 单纯的获取 audit fix 会做的事,并以 json 格式输出。
npm audit fix --dry-run --json# 获取详情
npm audit# 以 JSON 格式打印报告
npm audit --json# 安装单个包关闭安全审查:
npm install example-package-name --no-audit
# 安装所有包关闭安全审查 - 运行
npm set audit false - 手动将 ~/.npmrc 配置文件中的 audit 修改为 false

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

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

相关文章

订单系统设计与营销系统整合的全面探讨

在电商领域&#xff0c;订单系统的设计至关重要&#xff0c;涉及到用户体验、营销费用分摊、以及各种参数的校验。本文将从多个角度深入探讨订单系统的设计&#xff0c;包括与营销系统的整合、营销费用分摊&#xff0c;以及下单前的各种参数校验。 1. 订单系统与营销系统整合 …

算法训练营Day58(单调栈1)

说明 单调栈适合寻找一个元素左边或右边第一个比自己大或小的元素 其作用是用力存放之前遍历过的元素 单调递减的栈是求比其小的元素 单调递增的栈是求比其大的元素 739. 每日温度 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 提醒 今天正式开…

在 ASP.NET Core Web API 中使用操作筛选器统一处理通用操作

前言&#xff1a;什么是操作筛选器 操作筛选器是 ASP.NET Core Web API 中的一种过滤器&#xff0c;用于在执行控制器操作&#xff08;Action&#xff09;之前或之后执行一些代码&#xff0c;完成特定的功能&#xff0c;比如执行日志记录、身份验证、授权、异常处理等通用的处…

Java多线程--线程的生命周期

文章目录 一、JDK1.5之前&#xff1a;5种状态五种状态1、新建2、就绪3、运行4、阻塞5、死亡 二、JDK1.5及之后&#xff1a;六种状态 Java语言使用 Thread类及其子类的对象来表示 线程&#xff0c;在它的一个完整的生命周期中通常要经历如下一些状态。 一、JDK1.5之前&#xf…

搜狐新闻客户端使用Kotlin之后对JSON解析框架的探索

本文字数&#xff1a;7488字 预计阅读时间&#xff1a;45分钟 01 引言 自2017年Google发布Kotlin语言之后&#xff0c;Android开发由原来的Java开始向Kotlin过度&#xff0c;目前绝大部分Android开发岗位基本要求就是熟练使用Kotlin。事实上&#xff0c;很多有着多年历史的项目…

CAD-autolisp(二)——选择集、命令行设置对话框、符号表

目录 一、选择集1.1 选择集的创建1.2 选择集的编辑1.3 操作选择集 二、命令行设置对话框2.1 设置图层2.2 加载线型2.3 设置字体样式2.4 设置标注样式&#xff08;了解即可&#xff09; 三、符号表3.1 简介3.2 符号表查找3.2 符号表删改增 一、选择集 定义&#xff1a;批量选择…

npm sill idealTree buildDeps 安装踩坑指南

参考&#xff1a;https://www.yuucn.com/a/1565526.html https://blog.csdn.net/m0_65066691/article/details/128168066 https://blog.csdn.net/Johanna51/article/details/123360477 通过如下指令获得用户配置文件目录&#xff0c; 删除.npmrc文件 npm config get usercon…

开发手札:Github Timeout 22

今天&#xff08;2024.01.26日&#xff09;&#xff0c;提交github又出现了ssh connect timeout errorcode 22&#xff0c;不论是创建新的sshkey还是配置.ssh/config都没用。 偶然在知乎上看到了解决方案&#xff0c;只需要在host中添加&#xff1a; 140.82.113.4 githu…

【广度优先搜索】【拓扑排序】【C++算法】913. 猫和老鼠

作者推荐 【动态规划】【map】【C算法】1289. 下降路径最小和 II 本文涉及知识点 广度优先搜索 拓扑排序 逆推 LeetCode913. 猫和老鼠 两位玩家分别扮演猫和老鼠&#xff0c;在一张 无向 图上进行游戏&#xff0c;两人轮流行动。 图的形式是&#xff1a;graph[a] 是一个列…

【Go 快速入门】基础语法 | 流程控制 | 字符串

文章目录 基础语法值变量常量运算符指针new 和 make 区别 字符串byte 和 rune 类型 流程控制for 循环If else 分支switch 分支 基础语法 项目代码地址&#xff1a;02-basicgrammar 值 基本类型值 Go 最基础的数据类型&#xff0c;比如整型、浮点型、布尔型。 复合类型值 …

List使用addAll()方法报错

当使用Arrays.asList方式创建出来的list&#xff0c;在使用addAll方法的时候报错如下&#xff1a; Exception in thread "main" java.lang.UnsupportedOperationException 这个问题记录下&#xff0c;以防以后忘记。 下面是代码 List<String> objects new A…

风口抓猪-借助亚马逊云科技EC2服务器即刻构建PalWorld(幻兽帕鲁)私服~~~持续更新中

Pocketpair出品的生存类游戏《幻兽帕鲁》最近非常火&#xff0c;最高在线人数已逼近200万。官方服务器亚历山大&#xff0c;游戏开发商也提供了搭建私人专用服务器的方案&#xff0c;既可以保证稳定的游戏体验&#xff0c;也可以和朋友一起联机游戏&#xff0c;而且还能自定义经…

使用易语言编写桌面截图工具

使用易语言腾讯云ocr实现截屏识别文本&#xff0c;将识别文本发送百度翻译api实现翻译 视频地址&#xff1a; 易语言实现桌面截屏ocr翻译工具_哔哩哔哩_bilibili 代码地址&#xff1a; python_cut_tool: python截屏ocr翻译 (gitee.com)

LeetCode:1706. 球会落何处(Java 模拟)

目录 1706. 球会落何处 题目描述&#xff1a; 实现代码与解析&#xff1a; 原理思路&#xff1a; 1706. 球会落何处 题目描述&#xff1a; 用一个大小为 m x n 的二维网格 grid 表示一个箱子。你有 n 颗球。箱子的顶部和底部都是开着的。 箱子中的每个单元格都有一个对角线…

如何实现无公网IP实现远程访问MongoDB文件数据库

&#x1f4d1;前言 本文主要是如何实现无公网IP实现远程访问MongoDB文件数据库的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &#x…

移动Web——平面转换-平移

1、平面转换-平移 取值 像素单位数值百分比&#xff08;参照盒子自身尺寸计算结果&#xff09;正负均可 技巧 translate()只写一个值&#xff0c;表示沿着X轴移动单独设置X或Y轴移动距离&#xff1a;translateX()或translateY() <!DOCTYPE html> <html lang"en&q…

53-JS之BOM,打开,关闭窗口,screen对象,history对象,location对象,工作区尺寸,滚动距离

1.简介 BOM(Browser Object Model)---浏览器对象模型,提供JS当中对浏览器的各种操作对象 1.1BOM与DOM 2.打开窗口window.open(URL,name,features) 2.1 URL字符串:地址网址文件源 2.2name:指target属性,规定在哪个窗口打开新的url链接 blank:打开一个新窗口 _parent…

MVC架构模式与三层架构

提示&#xff1a;博客中的图片来源于动力节点在B站的视频讲解。 MVC架构模式与三层架构 一、三层架构二、MVC&#xff08;model view controller&#xff09;1.MVC 架构的工作流程&#xff08;1&#xff09;JSP Servlet javabean实现MVC。&#xff08;2&#xff09;SSM&#…

Linux——文本编辑器Vim

Linux中的所有内容以文件形式管理&#xff0c;在命令行下更改文件内容&#xff0c;常常会用到文本编辑器。我们首选的文本编辑器是Vim&#xff0c;它是一个基于文本界面的编辑工具&#xff0c;使用简单且功能强大&#xff0c;更重要的是&#xff0c;Vim是所有Linux发行版本的默…

详解静态网页数据获取以及浏览器数据和网络数据交互流程

目录 前言 一、静态网页数据 二、网址通讯流程 1.DNS查询 2.建立连接 3.发送HTTP请求 4.服务器处理请求 5.服务器响应 6.渲染页面 7.页面交互 三、URL/POST/GET 1.URL 2.GET 形式 3.POST 形式 四.获取静态网页数据 前言 在网站设计领域&#xff0c;基于纯HTM…