search

BestDI / BestDI.github.io

Mia's Home
https://bestdi.github.io
1 stars 0 forks source link

微前端？前端也可以微服务化吗？ #25

Open BestDI opened 4 years ago

BestDI commented 4 years ago

Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends (技术，策略和配方，以建立一个现代的Web应用程序，由多个团队使用不同的JavaScript框架。-- 微前端)

微前端过程中需要解决的问题：----

现有实现的框架：

  1. Single-spa
  2. qiankun ---- github
  3. icsStarks 及用到的相关资源
  4. 美团外卖的微前端实践
  5. 美团的概念和实践
  6. 微前端在小米CRM系统的实践
  7. Phodal 的微前端概念解说
  8. 民间大神的实现
BestDI commented 4 years ago

在此过程中发现的利器 lerna

用于批量管理工程依赖和服务启动的 npm 插件 github intro page 知乎 - 使用lerna优雅地管理多个package

BestDI commented 4 years ago

1. ICE在微前端的探索

icestark 包含以下特性： 基于前端路由，模块化管理多个独立应用 不同应用独立仓库、独立开发与部署 统一管理页面公共内容（Common Header、Common Sidebar 等） 支持子应用 0 改动嵌入

2. 面向大型工作台的微前端解决方案 icestark

icestark 通过劫持 history.pushState 和 history.replaceState 两个 API，同时监听 popstate 事件，保证能够捕获到到所有路由变化。当捕获到路由变化时，根据路由查找对应的子应用，如果对应的还是当前这个子应用则什么事情都不做，如果对应的是新的一个子应用则卸载之前的子应用，同时加载新的子应用并渲染之。

3. 遇到的Nginx部署问题

首先得理解, 不过从哪个路径在浏览器中进行访问, 都需要指定到主工程根节点;

MicoDemo icestark的实践