微前端 -- 乾坤（二）源码篇

HTML Entry

HTML Entry 是由 import-html-entry 库实现的，通过 http 请求加载指定地址的首屏内容即 html 页面，然后解析这个 html 模版得到 template, scripts , entry, styles

{ 
  template: 经过处理的脚本，link、script 标签都被注释掉了, 
  scripts: [脚本的http地址 或者 { async: true, src: xx } 或者 代码块], 
  styles: [样式的http地址], 
  entry: 入口脚本的地址，要不是标有 entry 的 script 的 src，要不就是最后一个 script 标签的 src
}

然后远程加载 styles 中的样式内容，将 template 模版中注释掉的 link 标签替换为相应的 style 元素。

然后向外暴露一个 Promise 对象

{ 
  // template 是 link 替换为 style 后的 templatetemplate: embedHTML,
  // 静态资源地址assetPublicPath,
  // 获取外部脚本，最终得到所有脚本的代码内容
  getExternalScripts: () => getExternalScripts(scripts, fetch),
    // 获取外部样式文件的内容
    getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),
    // 脚本执行器，让 JS 代码(scripts)在指定 上下文 中运行
    execScripts: (proxy, strictGlobal) => {
      if (!scripts.length) {
        return Promise.resolve();
      }
      return execScripts(entry, scripts, proxy, { fetch, strictGlobal });
    }
}

qiankun 就用了这个对象中的 template、assetPublicPath 和 execScripts 三项，

将 template 通过 DOM 操作添加到主应用中，执行 execScripts 方法得到微应用导出的生命周期方法，并且还顺便解决了 JS 全局污染的问题，因为执行 execScripts 方法的时候可以通过 proxy 参数指定 JS 的执行上下文。

这就是 HTML Entry 的原理。

乾坤是怎样加载资源的？

加载微应用的时候要获取微应用的js、css、html等资源,qiankun使用了依赖库import-html-entry

loadApp中执行了这一行代码：

const { template, execScripts, assetPublicPath } = await importEntry(entry, importEntryOpts);

这里的importEntry来自于一个依赖库import-html-entry

importEntry

https://segmentfault.com/a/1190000022275991

https://juejin.cn/post/6885212507837825038

功能

l 加载css/js资源，并且将加载的资源嵌入到html中去；

l 获取scripts资源上的exports对象

类型

l Entry（参数entry的类型，必传)

// 代码片段1，所属文件：

src/index.js

export function importEntry(entry, opts = {}) {
  const { 
    fetch = defaultFetch, 
    getTemplate = defaultGetTemplate, 
    postProcessTemplate } = opts;
  const getPublicPath = opts.getPublicPath || opts.getDomain || defaultGetPublicPath;
  // 省略一些不太关键的代码...
  if (typeof entry === 'string') {
    return importHTML(entry, {
      fetch,getPublicPath,getTemplate,postProcessTemplate,
    });
  } // 此处省略了许多代码... 占位1}
importHTML
/**
* 加载指定地址的首屏内容
* return Promise<{ 
    // template 是 link 替换为 style 后的 template
    template: embedHTML,
    // 静态资源地址
    assetPublicPath,
    // 获取外部脚本，最终得到所有脚本的代码内容
    getExternalScripts: () => getExternalScripts(scripts, fetch),
    // 获取外部样式文件的内容
    getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),
    // 脚本执行器，让 JS 代码(scripts)在指定 上下文 中运行
    execScripts: (proxy, strictGlobal) => {
      if (!scripts.length) {
        return Promise.resolve();
      }
      return execScripts(entry, scripts, proxy, { fetch, strictGlobal });
    },
}> */

export default function importHTML(url, opts = {}) {
  // 三个默认的方法
  let fetch = defaultFetch;
  let getPublicPath = defaultGetPublicPath;
  let getTemplate = defaultGetTemplate;
  // 通过 fetch 方法请求 url，这也就是 qiankun 为什么要求你的微应用要支持跨域的原因
  return embedHTMLCache[url] || (embedHTMLCache[url] = fetch(url)
    // response.text() 是一个 html 模版
  .then(response => response.text())
  .then(html => {
    // 获取静态资源地址
    const assetPublicPath = getPublicPath(url);
  /**
  * 从 html 模版中解析出外部脚本的地址或者内联脚本的代码块 和 link 标签的地址
  * {
  * template: 经过处理的脚本，link、script 标签都被注释掉了,
  * scripts: [脚本的http地址 或者 { async: true, src: xx } 或者 代码块],
  * styles: [样式的http地址],
  * entry: 入口脚本的地址，要不是标有 entry 的 script 的 src，要不就是最后一个 script 标签的 src
  * }
*/

const { template, scripts, entry, styles } = processTpl(getTemplate(html), assetPublicPath);

// getEmbedHTML 方法通过 fetch 远程加载所有的外部样式，然后将对应的 link 注释标签替换为 style，即外部样式替换为内联样式，然后返回 embedHTML，即处理过后的 HTML 模版return 

getEmbedHTML(template, styles, { fetch }).then(embedHTML => ({

  // template 是 link 替换为 style 后的 template
  template: embedHTML,
  // 静态资源地址
  assetPublicPath,

  // 获取外部脚本，最终得到所有脚本的代码内容
  getExternalScripts: () => getExternalScripts(scripts, fetch),

  // 获取外部样式文件的内容
  getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),

  // 脚本执行器，让 JS 代码(scripts)在指定 上下文 中运行
  execScripts: (proxy, strictGlobal) => {

  if (!scripts.length) {
    return Promise.resolve();
  }

  return execScripts(entry, scripts, proxy, { fetch, strictGlobal });
  },
  }));
}));
}

例子：

这是fetch到的html

"<!DOCTYPE html>

<html lang="en">

 <head>

 <meta charset="utf-8" />

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

 <meta name="viewport" content="width=device-width,initial-scale=1.0" />

 <link rel="icon" href="/base/favicon.ico" />

 <title>micro-app-base</title>

 <link href="/base/static/js/about.js" rel="prefetch"><link href="/base/static/js/app.js" rel="preload" as="script"><link href="/base/static/js/chunk-vendors.js" rel="preload" as="script"></head>

 <body>

 <noscript>

 <strong

 >We're sorry but micro-app-base doesn't work properly without JavaScript enabled. Please

 enable it to continue.</strong

 >

 </noscript>

 <div id="microAppBase"></div>

 <!-- built files will be auto injected -->

 <script type="text/javascript" src="/base/static/js/chunk-vendors.js"></script><script type="text/javascript" src="/base/static/js/app.js"></script></body>

 <link rel="stylesheet" href="[https://css.znlh.work/index.css](https://css.znlh.work/index.css)"></link>

<style>

 .hidden {

 display: none;

 }

</style>

</html>

"

经过processTpl处理后：

template： 经过处理的脚本，link、script 标签都被注释掉了

"<!DOCTYPE html>

<html lang="en">

 <head>

 <meta charset="utf-8" />

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

 <meta name="viewport" content="width=device-width,initial-scale=1.0" />

 <link rel="icon" href="/base/favicon.ico" />

 <title>micro-app-base</title>

 <!-- prefetch/preload link /base/static/js/about.js replaced by import-html-entry --><!-- prefetch/preload link /base/static/js/app.js replaced by import-html-entry --><!-- prefetch/preload link /base/static/js/chunk-vendors.js replaced by import-html-entry --></head>

 <body>

 <noscript>

 <strong

 >We're sorry but micro-app-base doesn't work properly without JavaScript enabled. Please

 enable it to continue.</strong

 >

 </noscript>

 <div id="microAppBase"></div>

 <!-- script [http://localhost:3071/base/static/js/chunk-vendors.js](http://localhost:3071/base/static/js/chunk-vendors.js) replaced by import-html-entry --><!-- script [http://localhost:3071/base/static/js/app.js](http://localhost:3071/base/static/js/app.js) replaced by import-html-entry --></body>

 <!-- link [https://css.znlh.work/index.css](https://css.znlh.work/index.css) replaced by import-html-entry --></link>

<style>

 .hidden {

 display: none;

 }

</style>

</html>"

scripts： [脚本的http地址 或者 { async: true, src: xx } 或者 代码块]

['http://localhost:3071/base/static/js/chunk-vendors.js', 'http://localhost:3071/base/static/js/app.js']

styles： [样式的http地址]

['https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css']

entry: 入口脚本的地址

"http://localhost:3071/base/static/js/app.js"

getEmbedHTML

外部样式转换成内联样式

将html中的
<link rel="stylesheet" href="[https://css.znlh.work/index.css](https://css.znlh.work/index.css)"></link>

转换为：

<style>/* [https://css.znlh.work/index.css](https://css.znlh.work/index.css) */@charset "UTF-8";:root{--el-color-white:#ffffff;--el-color-black:#000000;--el-color-primary:#409eff;--el-color-primary-light-1:#53a8ff;--el-color-primary-light-2:#66b1ff;--el-color-primary-light-3:#79bbff;:…"

execScripts

该方法的作用就是指定一个 proxy（默认是 window）对象，然后执行该模板文件中所有的 JS，并返回 JS 执行后 proxy 对象的最后一个属性（见下图 ）。

61C43E20-F08B-4a68-951A-525CE8CA4A75.png

在微前端架构中，这个对象一般会包含一些子应用的生命周期钩子函数，主应用可以通过在特定阶段调用这些生命周期钩子函数，进行挂载和销毁子应用的操作。

主应用挂载子应用 HTML 模板

执行注册子应用时传入的 render 函数，将 HTML Template 和 loading 作为入参，render 函数的内容一般是将 HTML 挂载在指定容器中

initialAppWrapperElement = createElement(appContent, strictStyleIsolation, scopedCSS, appInstanceId);
initialContainer = 'container' in app ? app.container : undefined;
render({ 
  element: initialAppWrapperElement,
  loading: true, 
  container: initialContainer
}, 'loading');

function createElement(
  appContent, 
  strictStyleIsolation, 
  scopedCSS, 
  appInstanceId) {  
    var containerElement = document.createElement('div');  
    containerElement.innerHTML = appContent; 
    // appContent always wrapped with a singular div  
    var appElement = containerElement.firstChild;  
    return appElement;
}

在这个阶段，主应用已经将子应用基础的 HTML 结构挂载在了主应用的某个容器内，接下来还需要执行子应用对应的 mount 方法（如 Vue.$mount）对子应用状态进行挂载。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,504评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,434评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,089评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,378评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,472评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,506评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,519评论 3赞 413
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,292评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,738评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,022评论 2赞 329
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,194评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,873评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,536评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,162评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,413评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,075评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,080评论 2赞 352