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

网站描述:为微型前端提供快速，简单且完整的解决方案

qiankun乾坤

官方网站：

小编说

以上是编程之家为你收集整理的qiankun乾坤全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。