qiankun微前端初体验

什么是微前端

通俗易懂的来讲，微前端是能够将一个大应用的不一样部分进行独立的部署，各个部分之间相互独立，独立部署的能力容许他们构建孤立或松散耦合的服务。即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 javascript

微前端的核心设计理念

技术栈无关

主框架不限制接入应用的技术栈，微应用具有彻底自主权css

独立开发、独立部署

微应用仓库独立，先后端可独立开发，部署完成后主框架自动完成同步更新html

增量升级

在面对各类复杂场景时，咱们一般很难对一个已经存在的系统作全量的技术栈升级或重构，而微前端是一种很是好的实施渐进式重构的手段和策略前端

独立运行时

每一个微应用之间状态隔离，运行时状态不共享vue

微前端的核心目标是将巨石应用拆解成若干个能够独立的子应用 java

qiankun是一个基于single-spa的微前端实现库react

qiankun快速上手

qiankun官网qiankun.umijs.org/zh/ 具体的代码示例 github上有一些qiankun的示例代码github.com/zhjing1019/… webpack

主应用

主应用不限技术栈，只须要提供一个容器 DOM，而后注册微应用并 start 便可。git

yarn add qiankun # 或者 npm i qiankun -S
复制代码

import { registerMicroApps, start } from 'qiankun';

/** * 在主应用中注册微应用 */
registerMicroApps([
    {
      name: 'vue sub-app1',
      entry: '//localhost:7100/sub.html',
      container: '#yourContainer',
      activeRule: '/yourActiveRule',
    },
    {
      name: 'vue sub-app2',
      entry: '//localhost:7101',
      container: '#yourContainer',
      activeRule: '/yourActiveRule',
    },
  ],
  {
    beforeLoad: [
      app => {
        console.log('before load', app);
      },
    ],
    beforeMount: [
      app => {
        console.log('before mount', app);
      },
    ],
    afterMount: [
      app => {
        console.log('after mount', app);
      },
    ],
    afterUnmount: [
      app => {
        console.log('after unload', app);
        app.render({appContent: '', loading: false});
      },
    ],
  }
);

start();
复制代码

注册微应用

当微应用信息注册完以后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，全部 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子微应用须要在本身的入口 js (一般就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。微应用不须要额外安装任何其余依赖便可接入 qiankun 主应用。github

/** * bootstrap 只会在微应用初始化的时候调用一次，下次微应用从新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。 * 一般咱们能够在这里作一些全局变量的初始化，好比不会在 unmount 阶段被销毁的应用级别的缓存等。 */
export async function bootstrap() {
  console.log('react app bootstraped');
}

/** * 应用每次进入都会调用 mount 方法，一般咱们在这里触发应用的渲染方法 */
export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

/** * 应用每次 切出/卸载 会调用的方法，一般在这里咱们会卸载微应用的应用实例 */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}

/** * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效 */
export async function update(props) {
  console.log('update props', props);
}
复制代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iIBEkuhJ-1618121559620)(无标题.resources/28012AE2-6DD0-419F-9199-FBD369B4B041.png)]

主应用和子应用项目通讯

initGloabalState(state) 定义全局状态，并返回通讯方法，官方建议在主应用使用，微应用经过 props 获取通讯方法。

MicroAppStateActions
- onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void，在当前应用监听全局状态，有变动触发 callback，fireImmediately = true 当即触发 callback
- setGlobalState: (state: Record<string, any>) => boolean，按一级属性设置全局状态，微应用中只能修改已存在的一级属性
- offGlobalStateChange: () => boolean，移除当前应用的状态监听，微应用 umount 时会默认调用

主应用：

import { initGlobalState, MicroAppStateActions } from 'qiankun';

// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {
  // state: 变动后的状态; prev 变动前的状态
  console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();
复制代码

子应用

// 从生命周期 mount 中获取通讯方法，使用方式和 master 一致
export function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    // state: 变动后的状态; prev 变动前的状态
    console.log(state, prev);
  });

  props.setGlobalState(state);
}
复制代码

js变量隔离

每一个子应用都有相应的生命周期，同一时间内，只会有一个子应用的实例生效。js沙箱封装在qiankun的生命周期中。当一个子应用被销毁，其js沙箱也就被销毁。惟一不足的地方是，window的对象,没法隔离,最好不要绑定原型。

css污染

一、scoped（暂时解决方案：主应用的样式使用特殊class或者scoped）二、主应用能够经过设置 prefixCls 的方式避免冲突三、配置 webpack 修改 less 变量

{
  loader: 'less-loader',
+ options: {
+   modifyVars: {
+     '@ant-prefix': 'yourPrefix',
+   },
+   javascriptEnabled: true,
+ },
}
复制代码

qiankun的具体详细解析源码 www.jianshu.com/p/db08174fa…

欢迎关注个人我的技术博客 javascript艺术