qiankun 微前端框架原理

在阅读此篇文章之前，需要了解的是qiankun是用来做什么的

Step 1

qiankun 通过 registerMicroApps 来注册应用，通过 start 来启动应用，like this

app.js

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
]);
start();

Step 2

这其中有一些关键点，比如：

如何只通过 url ，就可以渲染到指定的 container 中？
如何解决各微应用之间，主应用和微应用之间的 js 和 css 污染的问题

qiankun 通过 import-html-entry 库来加载html，通过 url 获取到 html 模版，script 和 link 标签

对于获取到的 script 标签，qiankun 会通过 script 标签的 src 属性，来获取到 js 文件，并通过 script 标签的 onload 事件，来加载 js 文件。

文件是什么样的呢？我们可以从 qiankun 提供的示例中看到

example.js

const render = ($) => { 
  $('#purehtml-container').html('Hello, render with jQuery');
  return Promise.resolve();
};
((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);

所以可以通过代理主应用的window，来实现 js 的沙箱；这里先不做赘述，你可以理解为，微应用的 window 来源于主应用，但是又不会影响到主应用

...