记一个Lerna项目npm包依赖黑洞解决方案

519 阅读2分钟

背景

一共用lerna管理的组件项目随着时间的积累,目前已开发近百个组件,每个组件独有一份依赖,导致项目占据空间急剧增多,达到25.38G,触发磁盘告警,实际代码量400+M,空间大小主要被node_module占据。

方案1:使用pnpm

pnpm介绍:pnpm.io

有pnpm会将npm包放到统一的存放位置,当使用pnpm安装依赖时,是将npm包软连接到node_module目录,这样能保证你的磁盘上只会有一份npm包文件。

由于lerna支持置顶npm安装工具,所以只需要修改lerna配置即可

image.png 遇到的问题

1、部分包声明的peerDependencies 没有安装

解决方案:配置.npmrc文件,设置auto-install-peers=true,注意需要在每个package目录下配置,或者使用全局配置。

2、依赖强行打平,同一个包只会安装一个版本

解决方案:手动指定部分npm包的版本,有坑(如通天塔共建楼层本地编译previewUrl失效了),应该是某个依赖版本不对

方案2:使用lerna bootstrap --hoist

lerna官方说明:lerna.js.org/docs/guides…

简单来说就是会将各个package中的依赖提升到项目根目录安装,所有package共用同一个node_module

遇到的问题

1、根目录node_module版本和package中以来的包版本不一致,导致部分package还是安装了大量包

解决方案:统一各个package中的dependencies依赖

2、@leo/leo-ifloor-react-builder 作为间接依赖,被一个包显式声明,但是版本教老,导致编译异常

解决方案:去掉该包的声明

3、编译时npm包查找路径边长了,导致编译速度变慢

修改webpack resolve配置,优先从根目录查找

方案3:使用workspace + yarn

该方案实际上是用yarn的workspaces能力,此时依赖管理由yarn托管。执行lerna bootstrap等效于执行yarn install。

官方文档:classic.yarnpkg.com/lang/en/doc…

该功能会将workspaces配置的package的依赖统一提升到项目根目录的node_module(和方案2相似),若不能提升的依赖(版本和根目录已有的版本不同)则在package自己的目录安装。

改动点

lerna配置:

image.png

根目录package.json配置,新增workspaces:

image.png

遇到的问题

和方案2的问题一样

优点

安装和清理依赖都非常快,安装体积大幅减少到2.33G。