前言

cpf23333大约 3 分钟

前言

微应用把项目的各个页面或模块拆分成了单独的项目,部署后再拼接展示,这样让各个页面或模块有能力只加载自己需要的内容,一定程度上提升页面的加载速度,降低页面更新所需的资源,但是有一个问题,多个子应用如何使用同一套封装的样式,自定义方法及组件呢

解决办法

程序开发过程中最常用的思想是代码抽离,这一套放组件开发上当然也是适用的,那么,怎么抽离呢

最笨的办法

在一个子项目里写组件,其他项目把文件拷过去。但这样工作量很大,出错的概率也很高,各项目间因最后同步时间不同而导致组件行为差异的概率也很高

不那么笨的办法

将公共组件代码单独建库,发布到私有 npm 仓库里

这样的好处是可以锁定版本,每一个应用都可以使用不同版本的公共组件

但坏处是每一次升级公共组件就需要重新安装一遍依赖,在项目开发的过程中我们可能需要频繁地更新组件,于是就会开始刷版本号,还有不同分支的问题,npm 依赖包是不带 git 仓库的,没办法切换分支,难道还要有多少分支就发布多少种依赖包吗???

当然是不行的。

npm 有一个命令叫 npm link,对这个命令的介绍可以看下这个open in new window

这个命令的好处是多个项目可以共用同一批文件,比上面好一点,但分支的问题还是不能解决,比如某个项目要用组件库的 dev-1 分支,另一个项目要用 dev-2 分支,两个项目要同时进行开发,这怎么办?

比较好的办法 2-软连接

什么是软链接什么是硬链接可以看下这个open in new window

简单来讲这东西可以理解为快捷方式,对这个文件的访问会自动跳转到实际的文件或目录上,就好像这个文件就在这个文件夹里一样

我们可以写一个脚本,自动打开命令行,输入各个项目的文件夹地址,把组件库映射进各个子项目当中,就可以在各个子项目里使用同一批组件库文件,保证组件的行为和样式一致,如有更新组件库的代码,各个子项目也会同步收到文件的变化。

那不同项目要用不同分支的组件的问题怎么解决呢?再拉一份组件库代码不就完了嘛

很好的办法-Monorepo

https://zhuanlan.zhihu.com/p/77577415open in new window

Monorepo 的思想是把各个项目放到了同一个 git 仓库下,这样在同步代码后即可保证组件处于最新状态,但不可避免地会把各个项目的提交记录混到一起

现在有几个工具可以用来辅助开发

我认为的最好办法

公共组件单独建库,打成 xxx.dll.js 文件供各个项目直接使用。不需要更新组件的话,一次编译,再不打包。 https://juejin.cn/post/6967164397127270436open in new window

上次编辑于:
贡献者: cpf23333