qiankun 源码解析

2022-11-22 本文已影响0人 Bennt

微前端

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用不限制技术栈，可以独立开发、独立部署、独立运行时状态隔离。

初始化全局配置 start

1668162668393.png

第197~204行：设置配置参数（有默认值），将配置参数存储在 frameworkConfiguration 对象中；
第206~207行：配置预加载后，将会对配置的参数做预加载处理；

第210行：是qiankun根据环境支持的沙箱模式给出当前使用哪种沙箱方案的提示信息。

第212行：调用single-spa的 start方法启动应用（startSingleSpa 是别名），而这里传了一个urlRerouteOnly的作用是什么呢?

startSingleSpa({ urlRerouteOnly: true });

single-spa除了监听hashChange或popState两个事件外，还劫持了原生的pushState和 replaceState两个方法，而像scroll-restorer这样的第三方组件可能会在页面滚动时，通过调用pushState或replaceState，将滚动位置记录在state中，而页面的url实际上没有变化。这种情况下，single-spa理论上不应该去重新加载应用，但是由于这种行为会触发页面的hashChange事件，所以根据上面的逻辑，single-spa会发生意外重载。

为了解决这个问题，single-spa允许开发者手动设置是否只对url值的变化监听，而不是只要发生hashChange或popState就去重新加载应用。

第213行：把started设为true，为了后面的手动加载loadMicroApp的时候不用重复执行start。

第215行：主要是为了防止在未执行single-spa的start方法，限制registerMicroApps注册的子应用加载必须在start之后，避免start传递的参数因为子应用提前执行取不到。

注册子应用 - registerMicroApps

1668166613656.png

第57行：遍历未注册的子应用，调用single-spa的registerApplication方法，注册所有子应用，这里registerApplication参数含义是

{
  name: "app1", // 应用名称
  app: function () {},  // 回调函数（activeRule 激活时调用）
  activeRule: '/app1',（子应用的激活规则）
  props: {}（主应用需要传递给子应用的数据）
}

此时，微前端已全部初始化完成，等待子应用的激活时机。

1668167209483.png

假如此时子应用已激活，此时会执行第59行的回调方法，接着就会执行loadApp。

1668169099423.png

在应用激活时候，我们可以看到第264行，通过调用import-html-entry的importEntry方法，返回了一个对象，如下图：

image.png

字段	解释
template	将脚本文件内容注释后的 html 模板文件
assetPublicPath	资源地址根路径，可用于加载子应用资源
getExternalScripts	方法：获取外部引入的脚本文件
getExternalStyleSheets	方法：获取外部引入的样式表文件
execScripts	方法：执行该模板文件中所有的 JS 脚本文件，并且可以指定脚本的作用域 - proxy 对象

把getExternalScripts 和 getExternalStyleSheets 函数执行的结果打印出来，可以看到样式表和js脚本的代码如下：

image.png

其中，execScripts 会先调用内部方法getExternalScript，将外部script拿到和行内script合并成一个队列按顺序执行。

那在执行过程中是如何给子应用设置沙箱的？

image.png

首先看第173行，外部可以通过beforeExec对代码进行替换处理，进行一些自定义的操作，然后通过 getExecutableScript对代码进行包装。

// import-html-enrry /src/index.js 54行
function getExecutableScript(scriptSrc, scriptText, opts = {}) {
    const { proxy, strictGlobal, scopedGlobalVariables = [] } = opts;

    const sourceUrl = isInlineCode(scriptSrc) ? '' : `//# sourceURL=${scriptSrc}\n`;

    // 将 scopedGlobalVariables 拼接成函数声明，用于缓存全局变量，避免每次使用时都走一遍代理
    const scopedGlobalVariableFnParameters = scopedGlobalVariables.length ? scopedGlobalVariables.join(',') : '';

    // 通过这种方式获取全局 window，因为 script 也是在全局作用域下运行的，所以我们通过 window.proxy 绑定时也必须确保绑定到全局 window 上
    // 否则在嵌套场景下， window.proxy 设置的是内层应用的 window，而代码其实是在全局作用域运行的，会导致闭包里的 window.proxy 取的是最外层的微应用的 proxy
    const globalWindow = (0, eval)('window');
    globalWindow.proxy = proxy;
    // TODO 通过 strictGlobal 方式切换 with 闭包，待 with 方式坑趟平后再合并
    return strictGlobal
        ? (
            scopedGlobalVariableFnParameters
                ? `;(function(){with(window.proxy){(function(${scopedGlobalVariableFnParameters}){;${scriptText}\n${sourceUrl}}).bind(window.proxy)(${scopedGlobalVariableFnParameters})}})();`
                : `;(function(window, self, globalThis){with(window){;${scriptText}\n${sourceUrl}}}).bind(window.proxy)(window.proxy, window.proxy, window.proxy);`
        )
        : `;(function(window, self, globalThis){;${scriptText}\n${sourceUrl}}).bind(window.proxy)(window.proxy, window.proxy, window.proxy);`;
}

然后看evelCode做了什么。

export function evalCode(scriptSrc, code) {
    const key = scriptSrc;
    if (!evalCache[key]) {
        const functionWrappedCode = `(function(){${code}})`;
        evalCache[key] = (0, eval)(functionWrappedCode);
    }
    const evalFunc = evalCache[key];
    evalFunc.call(window);
}