流水线打包踩坑记录

179 阅读2分钟

问题说明

公司一祖传项目(webpack4npm8)在不断的堆叠下,终于不堪重负流水线打包失败了。该吃的粑粑终于还是到要处理的时候了,来看看当前项目打包失败的原因。

问题处理

问题1:code CERT_HAS_EXPIRED

image.png

这个项目还是用的https://registry.npm.taobao.org作为npm仓库,淘宝已经发布过申明证书要在24年1月到期了。

image.png

解决方案:

那么直接删掉原来的lock文件与node_modules文件夹,使用新的淘宝仓https://registry.npmmirror.com/, 重新执行npm install, 问题解决。

问题2 Conflicting peer dependency

二阶段了,重新install哪有这么好的事,那必然还是要报错的。

image.png 那就是peerDependency冲突了,首先要了解peerDependency在下载中起的作用,建议参考这篇文章 zhuanlan.zhihu.com/p/506596270

总之就是依赖中需要相关依赖发生了冲突。这里是因为css-loader@7.1.2需要webpack@5但是项目中使用的是webpack@4.46.0。导致冲突。

看了看package.json也没有看到引入css-loader@7.1.2啊,然后发现他来自vue-loader@15.11.1

image.png

但是vue-loader@15.11.1中写的是css-loader@*,好家伙,全版本都行就直接下了最新版本的css-loader,然后最新版本的css-loader又需要webpack@5

解决方案

直接看了看原来项目里的css-loader^3.6.0版本的,然后就在package.json里写死css-loader的版本,不依赖peerDepency下载了。

image.png

html-webpack-plugin也是相同的问题,也写死版本) 问题解决。

问题3:tslint: not found

上面两步操作完成后,本地已经可以打包了,但是放在流水线一看:

image.png

tslint没有下载可还行。看了看本地打包成功的lock文件

image.png 是有这个依赖的呀,为什么不下载呢?

最终和维护流水线的同事确认了,流水线安装依赖的时候用了--legacy-peer-deps命令。

关于这个命令可以看看npm官网上的说明:docs.npmjs.com/cli/v9/usin…

image.png

简单的说就是忽略peerDependency中的依赖,所以不会下载tslint。

解决方案:

要么不使用--legacy-peer-deps命令,要不也可以在package.json中指定对应的依赖版本。

end

这样流水线又可以打包了,希望这波它能撑的更久一些哈哈