Vue3.0中的monorepo管理模式的实现-创新互联

前言

前段时间9月21日参加了在成都举办的第五届FEDAY， 印象比较深刻的是白鹭引擎首席架构师@王泽分享的《框架开发中的基础设施搭建》 ，提到了在下一代白鹭引擎中使用到monorepo模式，以用来管理多个模块，协调各个模块之间的依赖更新。
正好在国庆期间10月5日尤大公开了vue3.0已完成的源码，也是采用了monorepo管理模式，看来monorepo确实有其独到的优势，再加上以前在项目中遇到过相关的痛点，所以深入地了解了一下这种模式，本文将基于vue3.0讨论如何通过monorepo模式来管理代码的。

什么是 monorepo？

monorepo是一种将多个package放在一个repo中的代码管理模式，摒弃了传统的多个package多个repo的模式。

目前 Babel, React, Angular, Ember, Meteor, Jest等许多开源项目都使用该种模式来管理代码。

解决的问题

• 多个repo难以管理，编辑器需要打开多个项目；
• 某个模块升级，依赖改模块的其他模块需要手动升级，容易疏漏；
• 公用的npm包重复安装，占据大量硬盘容量，比如打包工具webpack会在每个项目中安装一次；
• 对新人友好，一句命令即可完成所有模块的依赖安装，且整个项目模块不用到各个仓库去找；

带来的问题

• 所有package代码集中在一个项目，单个项目体积较大；
• 所有package代码对所有人可见，无法做权限管理；

如何实现 monorepo？

目前业界最佳实践是采用yarn workspace + lerna 来实现，vue3.0也是采用两者结合的方式来实现。

yarn workspace可以实现在一个项目中实现多个模块的依赖新增和共用，而lerna的功能则更完善，不仅可以管理多个模块，还有清除模块node_modules，发布模块到npm，自动更新模块间版本依赖，并支持全量发布和根据改动单独发布等功能。

yarn官方推荐用yarn来处理依赖安装，用lerna来处理依赖更新和发布问题。

下面开始基于monorepo模式来搭建一个仿vue3.0的项目

1. 全局安装 yarn 和 lerna

$ npm i -g yarn lerna

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。