qiankun乾坤
qiankun（乾坤） 介绍
微框架的目标是什么：
使用不同JavaScript框架为多个团队构建现代Web应用程序的技术，策略和方法。
独立的开发经验对于大型系统非常重要，尤其是对于企业应用程序。但是如果你试图在这样的系统中实现微前端架构，你通常会因为这些问题而伤害你的大脑：
如何将您的独立子应用程序组合到主系统中？
如何保证您的子应用程序彼此隔离？
等等...
安装与用法
npm i qiankun -S
用qiankun创建主框架
import { registerMicroApps,start } from 'qiankun';
function render({ appContent,loading }) {
const container = document.getElementById('container');
reactDOM.render(<Framework loading={loading} content={appContent}/>,container);
}
function genActiveRule(routerPrefix) {
return (location) => location.pathname.startsWith(routerPrefix);
}
registerMicroApps(
[
{
name: 'react app',// app name registered
entry: '//localhost:7100',
render,
activeRule: genActiveRule('/react') },
{
name: 'vue app',
entry: { scripts: [ '//localhost:7100/main.js' ] },
activeRule: genActiveRule('/vue')
},
],
);
start({ prefetch: true,jsSandbox: true });
从子应用程序条目中导出生命周期
export async function bootstrap() {
console.log('react app bootstraped');
}
export async function mount(props) {
console.log(props);
reactDOM.render(<App/>,document.getElementById('react15Root'));
}
export async function unmount() {
reactDOM.unmountComponentAtNode(document.getElementById('react15Root'));
}
配置您的子应用程序捆绑器当您想构建一个子应用程序以集成到qiankun时，请确保您的捆绑器具有以下所需的配置：
webpack：
output: {
library: packageName,
libraryTarget: 'umd',
jsonpFunction: `webpackjsonp_${packageName}`,
}
parcel:
parcel serve entry.js --global myvariable
GitHub:https://github.com/umijs/qiankun
网站描述:为微型前端提供快速，简单且完整的解决方案