资源分类

微框架的目标是什么：  

使用不同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时，请确保您的捆绑器具有以下所需的配置： 

webpack：

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

parcel:

parcel serve entry.js --global myvariable

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/2434