微前端主流框架合集（一）

每个公司从小发展到大，难免会有旧新系统混杂，而且随着技术发展，从Purejs到JQuery，再到现在Vue，React，Angular等等响应式框架百花齐放，难免没法统一技术栈。为了能把新旧系统融合到一套系统给业务人员使用，就需要微前端来解决，新的模块可以独立开发，使用新的技术，旧的模块保留原有的技术持续迭代。

微前端是一种新型的前端架构方式，它把传统的单体应用拆分为多个小型前端应用，每个应用都可以独立运行、独立开发、独立部署。这种架构方式借鉴了微服务的理念，使得前端应用可以更加灵活、可扩展，同时也提高了开发效率和可维护性。

微前端解决方案有哪些？

截止目前，整理了以下微前端实现方案，分别是：

1. http路由：通过http服务器路由来分发子应用，例如nginx，apache。
2. iframe集成：主系统管理所有系统的菜单，通过iframe加载各个子应用的页面。
3. Web Components：Web 组件是一种标准化的 Web 技术，可以创建可复用的自定义元素和组件，直接当成html标签使用。
4. Module Federation：模块联邦是webpack内置的一个特性，能方便我们共享代码，强依赖于webpack。

微前端框架

Single-Spa

Single-spa 有两个核心概念，分别是 Applications （应用），config（配置）

• Applications：每个应用程序本身就是一个完整的 SPA (某种程度上)。 每个应用程序都可以响应 url 路由事件，并且必须知道如何从 DOM 中初始化、挂载和卸载自己。 传统 SPA 应用程序和 Single SPA 应用程序的主要区别在于：它们必须能够与其他应用程序共存，而且它们没有各自的 html 页面。

例如，React 或 Angular 就是应用程序。 当激活时，它们监听 url 路由事件并将内容放在 DOM 上。 当它们处于非活动状态时，不监听 url 路由事件，并且完全从 DOM 中删除。

• Config：一个 single-spa-config 配置, 这是 html 页面和向 Single SPA 注册应用程序的 JavaScript。每个应用程序都必须注册应用名称，挂载函数，激活函数，卸载函数。下面是注册一个应用的方法：

singleSpa.registerApplication({ name, app, activeWhen });

第一个参数是注册应用的 name，第二个 app 是一个 Promise ，导出三个函数

let domEl;
export function bootstrap(props) {
  return Promise.resolve().then(() => {
    domEl = document.createElement("div");
    domEl.id = "app1";
    document.body.appendChild(domEl);
  });
}
export function mount(props) {
  return Promise.resolve().then(() => {
    // 在这里通常使用框架将ui组件挂载到dom。请参阅https://single-spa.js.org/docs/ecosystem.html。
    domEl.textContent = "App 1 is mounted!";
  });
}
export function unmount(props) {
  return Promise.resolve().then(() => {
    // 在这里通常是通知框架把ui组件从dom中卸载。参见https://single-spa.js.org/docs/ecosystem.html
    domEl.textContent = "";
  });
}

这样一个简单的微前端应用就可以运行了。