扫一扫分享
使用不同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' ] },
render,
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时,请确保您的捆绑器具有以下所需的配置:
output: {
library: packageName,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${packageName}`,
}
parcel:
parcel serve entry.js --global myvariable
手机预览