pnpm monorepo micro-app 微前端开发架构

主要解决问题

• 随着项目迭代应用越来越庞大，难以维护。
• 跨团队或跨部门协作开发项目导致效率低下的问题。
• 单个前端部分可独立开发、测试和部署；
• 无需重新构建即可添加、移除或替换单个前端部分；
• 不同的前端部分可使用不同的技术构建；

---

微前端

核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。更有助于技术积累。

特性

• 不限制技术栈： 主框架不限制接入应用的技术栈，微应用具备完全自主权
• 独立开发、独立部署： 微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
• 增量升级（拓展）： 在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术
• 升级或重构： 而微前端是一种非常好的实施渐进式重构的手段和策略
• 独立运行： 每个微应用之间状态隔离，运行时状态不共享

未来期许

如一些导航网站,可以提供微前端的接入，我们的网站也可以入驻该网站，并且还可以提供一些API增加交互，有点类似于小程序。小程序可以调用微信的一些能力例如支付，扫码等，导航类型的网站也可以提供一些API，我们的网站接入之后提供API调用，可以实现更多更灵活的业务场景。

---

采用技术说明

monorepo

单代码库结构，它指的是一种软件开发方法，其中多个项目或组件存储在单个代码库中。它可以提供一个集中式的代码库和版本控制系统，可以更容易地进行协作和集成。通过 Monorepo，可以更容易地管理共享的组件、库和工具，以及更方便地进行测试、构建和部署。

pnpm 模块联邦

• 安装速度提升，pnpm安装速度至少是npm、yarn的2倍；
• 大幅度节省磁盘空间，pnpm包安装在一个地方，并通过链接的方式实现共享，不会在每个依赖的地方重复安装，这相对npm和yarn每个应用都要安装组件的依赖，安装大幅度节省了磁盘空间；
• 解决了幽灵依赖问题，npm和yarn依赖包扁平化，造成了一个问题，未在package.json里显性声明的，依赖包B，由于被A依赖，扁平化依赖结构时，B被提升到了node_modules的根目录下。因此可以在项目中import或者require到B。但是一旦A被移除或者升级，就会造成B可能被移除，这时候就会报错。pnpm的依赖结构是嵌套式的，不存在这个问题；
• 支持monorepos，pnpm内置更加完善的monorepo支持

micro-app

Micro App 微前端框架，它提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列的完善功能，最主要的是他同时支持webcomponent + qiankun sandbox 的微前端方案也支持无界ifrom的前端方案。支持vite并且它的接入成本极低，容易上手。

webpack

主程应用选择webpack是因为在现有微前端框架中，几大解决方案均兼容webpack，虽然在以webComponent+ifrom类型微前端解决方案中，以腾讯的无界、京东的micro-app。均已支持vite有更快更高的性能。单在以single-spa，webpack-module-federation为代表的，single-spa、阿里的乾坤、百度的EMP等。目前上不支持vite 虽然在各自的开发版本已经支持了。但是为了主程的可稳定性、可拓展性，目前考虑使用webpack，在主程使用nuxt 或者对版本有强制性要求也可以考虑vite。只推荐不强制。

git、git hooks、commitlint、docker

git 的检测提交 自动打包、自动发布等。

TypeScript

强类型开发阶段更稳定、规范。作为js的超级，让开发人员更早使用新的语言特性、也让开发人员更加简单的方式实现各种编程思维，比如面向对象、面相切片等等。并且作为现有流行框架的支持语言及底层实现语言。在不仅在编辑开发阶段有更好的支持，和三方框架的支持，还有更好的文档支持。

Nuxt、vue3

二者的选择在于业务的需求，一个是ssr服务端渲染、混合型渲染。一个是ssa单页面应用，对于SEO及首页加载等性能要求比较高的建议直接选择nuxt

规范：eslint、prettie

无规矩不成方圆。 一套规范的前端技术标准能大大降低团队的维护成本，也让新人快速上手，除此之外，更重要的是好的技术规范能将团队的技术能力带上正轨，向前发展。