Vue3.0中的monorepo管理模式的实现(2)

如果需要重新安装依赖,切记在删除项目根路径的node_modules前进行git提交保存,因为monorepo模式是以软链接的形式来实现内部 package 引用的,直接删除整个node_modules的同时会把所有package的文件删掉,难以恢复!

建议永不进行删除整个node_modules的操作,可以进入node_modules全选后再取消勾选内部package软链接再删除。

// 给所有 package 安装依赖,在对于的目录生成 node_modules,并在 node_modules 中为内部package生成软链接 $ lerna bootstrap // 默认会使用 npm 安装,但是本项目使用 yarn,可以指定使用 yarn $ lerna bootstrap --npm-client=yarn // 或者在 lerna.json 配置 {"npmClient": "yarn"} // 上述安装方式如果不同package之间安装了同一个npm包,会造成重复安装,增加安装时间和项目体积 // 可以利用 node_modules 向上查找的特性,将所有依赖安装到项目根路径的 node_modules 中,lerna 加上 --hosit即可 $ lerna bootstrap --hosit // 使用lerna bootstrap --npm-client=yarn --hoist // 会有冲突,报错--hoist is not supported with --npm-client=yarn, use yarn workspaces instead ------------------------------------------------ $ yarn // 推荐!! 用 yarn workspace 特性替代 lerna bootstrap

3. 清除pacakge中多余的node_modules

// 在 6.2 安装依赖时,部分npm包会给当前的package目录安装 node_modules // 同时根路径中的 node_modules 也会安装项目 $ lerna clean

4. 查看所有pacakge

// package.json 中设置了 "private": true 的 package 不会展示 $ lerna ls

5. 查看有改动的pacakge

// package.json 中设置了 "private": true 的 package 不会展示 // 在 Independent mode 下只有改动过的 package 才会被发布 // vue3.0 采用的是 Fixed/Locked mode (default),每次都会发布所有 package,package 版本跟随项目的版本走 $ lerna changed

6. 推送到git和发布到npm(重要)

// 根据当前的 lerna 模式(Fixed/Locked mode (default) 或者 Independent mode)来进行整包发布或者有改动的 package 单独发布 // 每次发布会自动更新相关package的版本号,并且会更新引用该package的其他package依赖 $ lerna publish

monorepo demo 链接

总结

本文介绍了vue3.0中monorepo管理模式的实现,通过yarn workspace和lerna两者相结合,达到了在一个repo 中高效便捷地管理多个package的目的。

在我们日常工作中可能没有开发白鹭引擎,vue这类大型框架的需求,但是这不代表我们用不到该模式,下面我总结了几种适合monorepo管理模式的场景:

大型框架,依赖自身开发的多个独立底层模块支撑;

后台项目,技术栈统一的多个后台系统,每个系统作为独立的package单独开发,优化开发和打包时间,同时共用的组件和js方法可以作为一个package;

ui组件库,各个组件之间独立实现按需加载,例如饿了么的移动端组件库mint-ui;

sdk,接入同一sdk的不同渠道代码统一管理;

...

参考资料

框架开发中的基础设施搭建
Vue 3 源码导读
基于lerna和yarn workspace的monorepo工作流

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/7813484e58056a7fac14b1a00ace6b23.html