我们为何从lerna迁移到Nx,从npm迁移到pnpm？ - dongyuwei/blog GitHub Wiki

背景简介：

2021年国庆前几个月我们为某国际顶级咨询公司做HTML5版SCORM培训课件。曾阁同学在项目的启动阶段搭建了项目的基础设施，主体是monorepo，使用Lerna来管理多个课件包和通用library（一个SCORM api库，一个通用UI组件库），每个课件脚手架都是由create-react-app生成的，通用liberary使用rollup构建，开发语言为TypeScript，前端框架使用React。

目前已经开发了15个课件App，和2个通用npm包。在整个项目开发、交付阶段，基于Lerna的整体技术架构工作得还算可以，so far so good。

为什么要从 Lerna 迁移到 Nx ？

因为 Nx 就是前端开发的 10X dev tools。

说人话是因为有时间折腾新东西了：国庆前项目就结束了，国庆后暂时没有新的工作安排，我就琢磨要把项目的开发体验提升一下。之前添加并且安装了新的npm包之后，会执行 lerna bootstrap --hoist，这个操作是非常耗时的，体验很差。而且在我们修改底层基础包时，Host App要较久才能加载到最新的修改，开发等待的时间较长。而且还有运行不稳定的情况（偶然报告找不到底层通用包）需要重启dev server。

那么，为啥要迁移到 Nx 哪？因为Nx有如下承诺:

“never build or test the same code twice”

我们现在15个课件App，和2个通用npm包，大多数时候，dev是工作在某个特定课件APP上的，CI构建（我们采用Jenkins CI pipelines）采用Nx后，只需要重新build发生了变化的课件App，其它都可以利用Nx的缓存来略过较耗时的构建过程。变化有多大？之前15个课件（及2个共同依赖包）的构建是2分11秒，而单独构建一个App包则只需要11s，耗时降低到原来的 8.4%。有点杀鸡用牛刀的感觉，但是当APP数量变多，单个App页面和组件数量也变多的情况下，Nx的缓存加速就很可观了。