乾坤 微前端_阿里开源微前端解决方案——qiankun（乾坤）

介绍

乾坤这个名字取得很大气，在中国传统文化中，乾意味着天堂而坤代表地球，所以乾坤是宇宙。乾坤是一个阿里巴巴UMI基于single-spa而对Micro Frontens的实现，但是它更容易应用到开发！

---

---

Github

因为是基于single-spa，地址一并给出

https://github.com/CanopyTax/single-spa

---

https://github.com/umijs/qiankun

微框架

微框架的目标(Micro Frontends)：

使用不同JavaScript框架为多个团队构建现代Web应用程序的技术，策略和方法。

---

独立的开发经验对于大型系统非常重要，尤其是对于企业应用程序。但是如果你试图在这样的系统中实现微前端架构，你通常会因为这些问题而伤害你的脑细胞：如何将你的独立子应用程序组合到主系统中？如何保证您的子应用程序彼此隔离？因此，我们构建了一个库来帮助你解决在构建微前端系统时可能遇到的这些故障问题，并将其命名为前端。可能是您遇到的最完整的微前端解决方案！实际上，笔者认为，微前端是将微服务的思想运用到前端的体现！

快速开始

• 安装

npm i qiankun -S

---

• 范例

npm inpm run install:examplesnpm start

---

import { registerMicroApps, start } from 'qiankun';function render({ appContent, loading }) { const container = document.getElementById('container'); ReactDOM.render(, container);}function genActiveRule(routerPrefix) { return (location) => location.pathname.startsWith(routerPrefix);}registerMicroApps( [ { name: 'react app', entry: '//localhost:7100', render, activeRule: genActiveRule('/react') }, { name: 'vue app', entry: { scripts: [ '//localhost:7100/main.js' ] }, render, activeRule: genActiveRule('/vue') }, ], { beforeLoad: [async app => { console.log('before load', app); }], beforeMount: [async app => { console.log('before mount', app); }], afterMount: [async app => { console.log('before mount', app); }], afterUnmount: [async app => { console.log('after unload', app); }], },);start({ prefetch: true, jsSandbox: true });

---

---

API

• 注册

function registerMicroApps(apps: Array>, lifeCycles?: LifeCycles): void;type RegistrableApp = { name: string; // app name entry: string | { scripts?: string[]; styles?: string[]; html?: string }; // app entry render: (props?: { appContent: string, loading: boolean }) => any; activeRule: (location: Location) => boolean; props?: object; // props pass through to app};type Lifecycle = (app: RegistrableApp) => Promise;type LifeCycles = { beforeLoad?: Lifecycle | Array>; beforeMount?: Lifecycle | Array>; afterMount?: Lifecycle | Array>; afterUnmount?: Lifecycle | Array>;};

---

• start

function start({ prefetch: boolean, jsSandbox: boolean }): void;

---

集成

• 主框架

使用qiankun api注册微型应用程序，如上面显示的示例。

• 子应用

1、从入口中导出这些生命周期钩子

export async function bootstrap() { console.log('react app bootstraped');}export async function mount(props) { ReactDOM.render(, document.getElementById('react15Root'));}export async function unmount() { ReactDOM.unmountComponentAtNode(document.getElementById('react15Root'));}

---

2、配置和打包，提供webpack和parcel的方式

webpack:

output: { library: packageName, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${packageName}`,}

parcel:

parcel serve entry.js --global myvariable

总结

在以往的文章中介绍过不少阿里的开源框架，不管是哪一个使用人都不少，阿里的前端团队真的为前端做了很多贡献，我相信大多数人都用过Antd，特别是国内的React开发者们，阿里提供了很多前端的解决方案，也就相应的为诸多开发者们提供了诸多简便的开箱即用方案，这点值得我们学习!