micro-front-end

了解微前端

micro-front-end

• 参考视频：https://www.bilibili.com/video/BV1Xi4y1d7TB/?spm_id_from=333.788&vd_source=677fb3b76ec1277e95a8ffb1282e30fa

  • 一句话概括：就是把不同应用挂在到不同元素下。比如 vue 应用挂载到 id 为 root 的元素，react 应用挂载到 id 为 app 的元素。css、js 文件进行沙箱隔离，防止互相影响。
    • 其实并不复杂，主要理解怎么把不同应用挂载到不同根节点上去。
      • 主应用：registerMicroApps 这个 api 的配置
      • 子应用：入口文件里生命周期的注入：https://github.com/umijs/qiankun/blob/master/examples/react16/src/index.js

• ppt 参考：https://github.com/ChangbaFE/presentation 搜索 "微前端"，点击进入里面有 .pptx。

• 文档参考：阿里乾坤示例——https://qiankun.umijs.org/zh/guide

• 代码参考：阿里乾坤项目——https://github.com/umijs/qiankun/tree/master/examples

  • https://github.com/umijs/qiankun/blob/master/examples/main/index.js为主项目入口文件，利用registerMicroApps这个api挂载多个应用

• 补充

  • 

• 微前端除了在 PPT 里提到的实现方式，作者还提到了 Web Components 也可以实现微前端——具体怎么做没有说

  • 其实就是利用了自定义标签本身就具有的隔离特性

  • 参考：

    • 阮一峰 Web Components 入门实例教程：https://www.ruanyifeng.com/blog/2019/08/web_components.html

      • 文章截图 (opens new window)

    • 究竟什么是 Shadow DOM？：https://juejin.cn/post/7137112423613333541

      • 文章截图 (opens new window)
      • 这篇文章还叫我们怎么查看以及修改某些元素浏览器自定义的样式：文章里搜索【首先打开浏览器控制台的设置选项】
        • 例如 video input 等元素都是可以修改默认样式的。