竟然与 package-lock.json 更新有关！部分用户 H5 页面白屏问题！

news2024/11/23 15:09:27

一.问题

1 场景

现象
接到部分用户反馈进入xxx H5 页面空白；
研发测日志里问题用户的线上页面URL地址可以正常访问，没有复现问题！！！

定位问题
监控平台和客户端日志报错：

SyntaxError: Unexpected token {

排查
经排查后，发现是更新了package-lock.json 文件导致。

2 解决方案

修改 package.json 文件中的 browserslist 【 > 2% => >1% 】

browserslist是一个用于指定项目所支持的目标浏览器范围的配置项，通常用于前端项目中。在package. json文件中的browserslist配置可以告诉各种工具(如Autoprefixer、 Babel等) 项目需要支持哪些浏览器的版本，以便这些工具能够相应地进行代码转译、前缀添加等操作。
browserslist配置的值通常是一个字符串，其中包含一系列浏览器标识符和版本范围。例如，一个典型的 browserslist 配置可能是这样的:

"browserslist": [
  "last 2 vers ions" ,
   "> 1%",
  "IE 11"
]

在这个例子中，browserslist 配置指定项目需要支持最近两个版本的所有浏览器、全球使用量超过1%的浏览器以及IE 11浏览器。根据这些配置，相关工具会根据项目的需求来进行代码转译和前缀添加，以确保项目在指定的浏览器范围内能够正常运行。

备用方案：还原之前的 package-lock.json文件

二. 总结

1. 关于package-lock.json

当package-lock.json文件发生变动时，可能会导致以下情况：
安装的依赖版本发生变化：package-lock.json文件记录了确切的依赖版本，如果这些版本发生变化，可能会导致代码在不同的环境中表现不一致，甚至出现不兼容的情况。
依赖的依赖版本变化：package-lock.json文件不仅记录了直接依赖的版本，还包括了依赖的依赖的版本，如果这些依赖的依赖版本发生变化，也可能会影响代码的行为，导致不兼容问题。

2. 如何预防此类不兼容问题发生

不轻易更新 package-lock.json 文件：可以使用 npm ci 替代 npm i 安装依赖

npm install：通常用于在开发过程中安装新的依赖包，并且会更新 package-lock.json 文件。如果你需要添加新的依赖包，并且希望更新 package-lock.json 以确保依赖版本的一致性，可以使用这个命令。
npm ci：用于在生产环境或持续集成环境中进行依赖安装。它会根据 package-lock.json 文件来安装依赖，而不会更新 package-lock.json 文件，从而确保依赖版本的一致性。如果你需要在生产环境或持续集成环境中安装依赖，可以使用这个命令。
npm install --no-save：用于安装依赖但不更新 package.json 文件中的 dependencies 字段。这个命令通常用于安装临时的开发依赖或工具，而不希望将其添加到 package.json 文件中。如果你只是需要安装临时的开发依赖或工具，并且不希望更新 package.json 文件，可以使用这个命令。

在生产环境中，通常建议根据package-lock.json文件来安装依赖，而不是仅依赖package.json文件。虽然package.json文件中也包含了依赖的信息，但是package-lock.json文件更加确切地指定了依赖的版本和依赖树结构，从而可以确保在不同环境下安装的依赖版本一致。