微前端qiankun库的使用

最新推荐文章于 2024-10-16 18:10:38 发布

戒骄戒躁TBE

最新推荐文章于 2024-10-16 18:10:38 发布

阅读量529

点赞数 2

文章标签： react vue js

本文链接：https://blog.csdn.net/weixin_45942049/article/details/119574602

版权

在汉语中，乾坤意为天和地也就是宇宙（包含万物）的意思

特点：
1、就程序员角度微前端最大的特点之一就是集成多个分布式web端（可理解为多个代码库），且子库可以独立部署。
2、qiankun 属于无侵入性的微前端框架，对主应用基座和微应用的技术栈都没有要求

思路：
作为一个项目，集成多个子库这种场景可类比：组件引入多个子组件；
需要一个入口库，可理解为主代码库，这里配置了路由，配置了挂载点；
子库配置地址与激活条件，当然子库也要注册到主库；

预想困难：

主库引入qiankun
引入之前做一些小的操作，实现官网的ui，也就是左侧目录，右侧内容展示的view，用框架的话配置一下路由～这一步也叫创建容器

/**
 * 注册微应用
 * 第一个参数 - 微应用的注册信息
 * 第二个参数 - 全局生命周期钩子
 */
registerMicroApps(apps, {
	//qiankun声明周期，字库加载前
  beforeLoad: [
      app => {
        console.log('[LifeCycle] before load %c%s', 'color: green;', app.name);
      },
  ],
  //子库挂载前
  beforeMount: [
      app => {
        console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
      },
  ],
  //子库销毁后
  afterUnmount: [
      app => {
        console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
      },
  ],
});

//字库的地址和对应路由
const apps = [
		{
      name: 'vue',
      entry: '//localhost:1111',
      //这里的容器就是主库留给空间
      container: '#subapp-viewport',
      loader,
      activeRule: '/vue',
    },
    {
      name: 'purehtml',
      entry: '//localhost:2222',
      container: '#subapp-viewport',
      loader,
      activeRule: '/purehtml',
    },
]

在主容库创建好器后继续注册字库
用到的第一个qiankun api registerMicroApps

第二个api添加全局的未捕获异常处理器（类似node的错误优先和react的错误边界）
addGlobalUncaughtErrorHandler
第三个api为start函数
最重要的配置其实就是注册与启动（一和三）其他的api还有很多主要入门即可

除此之外主库就不需要配置了

子库引入qiankun
这里并不需要引入三方库了，只需在主文件引入qiankun主库所需要的三个声明周期函数

以react为例的话


export async function bootstrap() {
  console.log('[react16] react app bootstraped');
}

export async function mount(props) {
  console.log('[react16] props from main framework', props);
  storeTest(props);
  render(props);
}

export async function unmount(props) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
}

普通js的话全局自执行函数

(global => {
  global['purehtml'] = {
    bootstrap: () => {
      console.log('purehtml bootstrap');
      return Promise.resolve();
    },
    mount: () => {
      console.log('purehtml mount');
      return render($);
    },
    unmount: () => {
      console.log('purehtml unmount');
      return Promise.resolve();
    },
  };
})(window);