问题说明
公司一祖传项目(webpack4,npm8)在不断的堆叠下,终于不堪重负流水线打包失败了。该吃的粑粑终于还是到要处理的时候了,来看看当前项目打包失败的原因。
问题处理
问题1:code CERT_HAS_EXPIRED
这个项目还是用的https://registry.npm.taobao.org作为npm仓库,淘宝已经发布过申明证书要在24年1月到期了。
解决方案:
那么直接删掉原来的lock文件与node_modules文件夹,使用新的淘宝仓https://registry.npmmirror.com/, 重新执行npm install, 问题解决。
问题2 Conflicting peer dependency
二阶段了,重新install哪有这么好的事,那必然还是要报错的。
那就是
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
但是vue-loader@15.11.1中写的是css-loader@*,好家伙,全版本都行就直接下了最新版本的css-loader,然后最新版本的css-loader又需要webpack@5。
解决方案
直接看了看原来项目里的css-loader是^3.6.0版本的,然后就在package.json里写死css-loader的版本,不依赖peerDepency下载了。
(html-webpack-plugin也是相同的问题,也写死版本)
问题解决。
问题3:tslint: not found
上面两步操作完成后,本地已经可以打包了,但是放在流水线一看:
tslint没有下载可还行。看了看本地打包成功的lock文件
是有这个依赖的呀,为什么不下载呢?
最终和维护流水线的同事确认了,流水线安装依赖的时候用了--legacy-peer-deps命令。
关于这个命令可以看看npm官网上的说明:docs.npmjs.com/cli/v9/usin…
简单的说就是忽略peerDependency中的依赖,所以不会下载tslint。
解决方案:
要么不使用--legacy-peer-deps命令,要不也可以在package.json中指定对应的依赖版本。
end
这样流水线又可以打包了,希望这波它能撑的更久一些哈哈