package-lock引起的奇妙问题

最新推荐文章于 2024-04-28 14:32:21 发布
最新推荐文章于 2024-04-28 14:32:21 发布
阅读量1.7k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoenweiex/article/details/107821861
版权
本文讲述了作者在处理一个图标位置偏右的bug时，通过排查代码和环境一致性，发现问题是由于未提交的package-lock.json导致的。当依赖版本用^标记时，npm会自动下载最新版本，而新版本可能与现有代码不兼容。解决方案是提交package-lock.json以确保团队成员使用的依赖版本一致。
摘要由CSDN通过智能技术生成

前言

一直以来对于npm的印象只停留在包管理工具上，使用起来就是在dependency里加个依赖就完了，一切都很顺利，偶然间发现项目里多出了一个package-lock的文件，但好像也没有什么用，就一直忽略，直到今天遇到问题。

问题现象

测试人员今天下午提了一个bug，并贴心的配合一张图来说明，如下图所示那个图标位置偏右。
在这里插入图片描述

我也没多想，感觉就是一个简单的样式问题，领了bug，打开IDE启动开发环境，准备三分钟解决。

定位流程

核实问题

启动了开发环境后，就有点懵逼，咦，我这里是正常的啊，如下图所示。
在这里插入图片描述
于是怀疑是不是测试人员的测试环境是不是有问题，让他访问一下我的机器，也是没问题的，我访问了一下测试服务也确实存在偏右的问题。ok，那现在肯定是有问题的了，开始定位。

检查代码一致性

第一步是检查测试线的代码跟master线的代码版本是否一致，因为测试服务是由CI系统构建的，有可能是测试同学的脚本异常，导致版本不一致。但是测试线和master线的hash值完全一致ÿ

最低0.47元/天 解锁文章
卡萨巴
关注
记package-lock引发的一次事故
skysys的研究小屋
01-21 1410
转载自： http://shymean.com/article/%E8%AE%B0package-lock%E5%BC%95%E5%8F%91%E7%9A%84%E4%B8%80%E6%AC%A1%E4%BA%8B%E6%95%85 去年因为升级npm包导致在开发环境崩了(相关记录)。昨天在生产环境遇见了一个更严重的问题：线上环境升级了thrift，其升级包的某个依赖未正确安装，导致node服务启动失败，线上走静态容灾两个多小时~ 经过排查和总结，发现之前对于pageack-lock的机制理解存在误区，因此
很多人上来就删除的package-lock.json，还有这么多你不知道的（深度内容）
前端下午茶
03-24 8881
作者：wuwhs原文：https://segmentfault.com/a/11900000396844600. 前言看完本文，你将从整体了解依赖版本锁定原理，package-lock.j...
关于package-lock
曲永庆的博客
12-25 1876
最外面的两个属性 name 、version 同 package.json 中的 name 和 version ，用于描述当前包名称和版本。version：包版本 —— 这个包当前安装在 node_modules 中的版本resolved：包具体的安装来源integrity：包 hash 值，基于 SubresourceIntegrity 来验证已安装的软件包是否被改动过、是否已失效。
关于package-lock.json
最新发布
weixin_43112703的博客
04-28 397
https://segmentfault.com/a/1190000044098267
package-lock的作用
热门推荐
h_mo_liang的博客
02-18 1万+
在 npm 5.0 版本后，npm install 后都会自动生成一个 package-lock.json 文件 ，当包中有 package-lock.json 文件时，npm install 执行时，如果 package.json 和 package-lock.json 中的版本兼容，会根据 package-lock.json 中的版本下载；如果不兼容，将会根据 package.json 的版本，更新 package-lock.json 中的版本，已保证 package-lock.json 中的版本兼容
package-lock.json
金溪的博客
07-11 272
package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，在npm 5时添加package-lock.json。所以从此以后npm会根据package-lock.json里的内容来处理和安装依赖而不是package.jsn。 ...
fix-package-lock：通过重新生成来修复package-lock.json
02-03
通过重新生成来修复package-lock.json 入门 先决条件 使用npm 5在Node v9上进行了测试。 正在安装 全局安装fix-package-lock将安装fix-package-lock命令： # Using npm npm install -g fix-package-lock # Using ...
将yarn.lock转换为package-lock.json，反之亦然-JavaScript开发
05-26
install npm install -g synp命令行用法yarn.lock => package-lock.json yarn＃确保node_modules文件夹目录并已更新synp --source-file /path/to/yarn.lock＃将创建/ path / to / package-lock.json package-lock....
node-tgz-downloader:根据package-lock.json文件下载所有的node_modules
04-29
节点tgz下载器 根据以下之一下载所有的tarball： 本地package-lock.json文件 网址到package-lock.json ...download-tgz package-lock path/to/package-lock.json 来自网址： download-tgz packag
基于C#，读取package-lock.json文件，并下载tgz到指定位置
06-12
背景：介于工作环境的问题，我们要把前端vue项目中所用到的各个依赖导入到另一个全新的内网仓库中，所以我就基于C#语言简单的写了个windows程序，实现根据vue项目的package-lock.json文件里相关依赖包的下载路径来...
package-lock.json文件详解
热爱前端的大三在校生
05-17 5198
在执行npm install下载包的时候，我们会发现目录中会出现package.json和package-lock.json文件，刚好最近我也在研究package的一些东西，对lock文件里的一些字段有点生疏了，写篇文章记录一下lock文件的一些知识。
package.json版本与lock机制讲解
曹定栓的博客
08-02 792
我们在搭建项目的时候，通过 npm 安装的依赖模块时，package.json文件中依赖的版本号前面会带符号 ^，有时候我们看别人的项目时也可能会看版本前带符号 ~ ，或者什么也不带，其中会有什么区别呢？
npm package-lock的管理
MichaelAn的博客
02-13 1431
npm package-lock的管理 package-lock.json文件很容易产生冲突，我们先来看看为什么需要 package-lock.json. package-lock.json 作用 package-lock.json is automatically generated for any operat...
package.json.lock 文件
extendworld的博客
12-05 2046
package.json.lock: 由于^的向后兼容的特性，在package.json里面是^8.1.3, 但是在执行npm install的时候，在保证大的版本号不变的情况下下载的可能是8.1.5版本，这个时候node_modules中存放的就是这个版本的模块。npm 包有一个规则就是同一个大版本号的包的接口符合兼容的要求，所以可以下载比现在版本号大的版本进行安装。但是npm包的世界实在太大，所
package-lock.json和package.json
xiaokanfuchen86的博客
04-04 166
package-lock.json就是锁定安装时的包的版本号，以保证其他人在npm install时大家的依赖能保持一致。 package.json npm是一个管理package之间依赖关系的管理器，它允许开发者在package.json中间标出自己项目对npm各库包的依赖。例如： "dependencies": { "@types/node": "^8.0.33", }, ^表示向...
package.json和package-lock.json分析
m0_69497411的博客
03-23 1454
在分析之前一定要 了解 node环境下npm这个包管理工具, 因为在使用npm进行本地安装就会生成 pacage.json 这个文件(内部记录了我们安装的包的版本信息)。这里又引入一个本地安装的概念,
package-lock.json的作用
sunqy1995的博客
08-21 432
最近在看npm相关的只是查看了一下package-lock.json相关的知识点，发现一篇好的文章分享出来参考文章 其实用一句话来概括很简单，就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。 引用知乎@周载南的回答 根据官方文档，这个package-lock.json 是在 npm install时候生成一份文件，用以记录当...
git上传文件显示package-lock.json 有大量更改的问题
那就好好整
01-27 2657
这里写自定义目录标题一、git上传文件显示package-lock.json 有大量更改的问题方式一：方式二：二、 造成原因三、 帮助链接 一、git上传文件显示package-lock.json 有大量更改的问题 最近在写需求的时候发现，显示package-lock.json 有大量更改，首先发现的是lockfileVersion 的版本为2，于是查找了解决办法，解决办法有以下两种方式： 方式一： 问同事的node版本，和同事的node版本保持一致，这样在 npm i 的时候就不会改变package-
package-lock过老
04-01
Package-lock 文件是 npm 5 以上版本中新引入的一种文件，用于锁定特定版本的每个依赖项。它会记录当前安装的每个软件包的确切版本号以及其所有子依赖项的版本号。 当您在项目中使用 package-lock 文件时，可以确保在安装依赖项时，每次都使用相同的版本。这有助于避免依赖项之间的版本冲突，从而确保您的项目能够正常运行。 如果您的 package-lock 文件过老，可能会导致依赖项版本不一致的问题。为了解决这个问题，您可以使用以下命令更新 package-lock 文件： ``` npm install ``` 这将根据 package.json 文件中的依赖项更新 package-lock 文件。如果您只想更新特定依赖项的版本，请使用以下命令： ``` npm install <package-name>@<version> ``` 这将安装指定软件包的特定版本，并更新 package-lock 文件以反映所安装的版本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值