jenkins部署过程中依赖版本不对齐导致问题的原因及解决方法

问题描述: WEB优化版本开发测试中发现的 jenkins部署构建过程中依赖版本不对齐导致的ie模式下打开项目白页

根本原因:

根本原因是有同一个名称的包作为了项目的依赖以及项目的依赖下的依赖且里外的同名的包版本不对齐

上图中可以看到, 外层是moment@2.24.0 antd下是moment@2.29.1

antd下的依赖 rc-calendar 及 rc-time-picker 下是 moment@2.29.1

moment版本不对齐导致了ie白页的问题

html2canvas里外的版本分别是 1.0.0-rc.7 和 1.0.0-alpha.12

html2canvas版本不对齐导致了前端实现的pdf下载功能失效的问题

产生原因:

package.json中 dependencies 下的 moment 和 html2canvas 锁了版本 dependencies要求 "moment": "2.24.0" 而antd下的 rc-calendar 和 rc-time-picker 中要求 moment: '2.x' 本次开发中为了区分qa上的灰度环境做了v2 v3的区分其中v3项目是新jenkins项目, 新建了文件夹并在该文件夹中build代码这个过程中就拉取了 2.24.0 和 2.29.1 两个版本所以导致了问题而v2老项目中是一个存在很久的jenkins项目, 其的node_modules已经存在了一些时间第一次build时的版本antd下的moment是2.22.0, 也与build线上代码的环境一致

在node_modules里 antd 已有 moment 的情况下符合 "2.x" 的要求,于是不会拉到更新的版本 html2canvas的问题同理这也是 v2项目 tag_**(build master代码)的项目以及本地开发环境无问题的原因在依赖版本不对其的情况下, 如果本地开发环境删除node_modules重新yarn安装依赖也可以复现问题

解决办法:

package.json中可以定义 resolutions 来定义依赖下的依赖版本写法demo:

{
  "name": "project",
  "version": "1.0.0",
  "dependencies": {
    "left-pad": "1.0.0",
    "c": "file:../c-1",
    "d2": "file:../d2-1"
  },
  "resolutions": {
    "d2/left-pad": "1.1.1",
    "c/**/left-pad": "^1.1.2"
  }
}

参考 resolutions写法Domo 这里有两个注意点:

resolutions里的层级由dependencies中的依赖包名称开始, 到其下的某个层级结束
如果层级太长, 可以用**来代表中间的层级, 但如果有个多个依赖下有同名的包,可能会一起影响

为了本次修复不会引入新的问题, 所以将版本对齐至线上部署的代码上方有版本说明在我们的package.json中加入如下代码

    "resolutions": {
        "antd/moment": "2.24.0",
        "antd/rc-calendar/moment": "2.22.2",
        "antd/rc-time-picker/moment": "2.22.2",
        "jspdf/html2canvas": "1.0.0-alpha.12"
    },

确认当前package.json中有resolution锁了moment和html2canvas的版本后, 删除node_modules -> 清除yarn的缓存 -> 清除npm的缓存并重新安装步骤如下:

删除node_modules

# windwos
del .\\node_modules\\
# linux
rm -rf node_modules/

yarn可以单独清除这两个模块的也可以全删除缓存

# 删除yarn两个包的缓存(推荐)
yarn cache clean moment
yarn cache clean html2canvas
# 删除yarn全部缓存
yarn cache clean
# 删除npm缓存
npm cache clean --force

重新 yarn 安装 yarn 或 yarn install

在本地只需要重新yarn就可以了在jenkins构建会自动yarn和build

可用npm或yarn方法:

npm ls <modules_name> // npm查看项目下模块结构
yarn list <moduels_name> // yarn查看项目下模块结构
yarn cache list --pattern <moduels_name> // yarn查看本地指定包缓存
npm list -json > npmlist.json // 输出global完整模块结构到json文件
npm list -json -g > npmlist.json // 输出当前项目完整模块结构到json文件