自制简易微前端框架,支持 Vite 3,支持各种前端框架

·  阅读 1089

最近我有这样的需求:

  1. 在一个项目里同时使用 Vue 和 React
  2. 全程使用 Vite 3 开发和打包
  3. 全程使用 TypeScript 开发

首先我尝试了一些微前端框架,但是遇到一些问题。索性就自己尝试手写一个微前端框架,功能满足自己的要求即可,不需要沙箱、样式隔离等功能。

代码:FrankFang/micro-frontend-starter (github.com)

原理

原理十分简单,pkg 目录中有三个子目录:container、app1 和 app2。

image.png

其中,

  • container 是容器应用,app1 是 Vue 子应用,app 2 是 React 子应用
  • container 应用的核心代码是 MicroApp 组件,该组件会在 mounted 时加载子应用的 entry
  • container 本身是用 Vue 3 实现的,引入了 Vue Router,它会根据路由来切换显示不同的 MiscroApp 组件
  • 开发模式下,entry 为子应用的 main.tsx;build 模式下,entry 为子应用的 manifest.json

大概就是这样。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改