微前端04 : 乾坤的资源加载机制(import-html-entry的内部实现)

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

// 代码片段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
}

// 代码片段2，所属文件：src/index.js
export default function importHTML(url, opts = {}) {
 // 这里省略许多代码... 占位1
 return embedHTMLCache[url] || (embedHTMLCache[url] = fetch(url)
  .then(response => readResAsString(response, autoDecodeResponse))
  .then(html => {
   const assetPublicPath = getPublicPath(url);
   const { template, scripts, entry, styles } = processTpl(getTemplate(html), assetPublicPath, postProcessTemplate);
   return getEmbedHTML(template, styles, { fetch }).then(embedHTML => ({
    template: embedHTML,
    assetPublicPath,
    getExternalScripts: () => getExternalScripts(scripts, fetch),
    getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),
    execScripts: (proxy, strictGlobal, execScriptsHooks = {}) => {
     if (!scripts.length) {
      return Promise.resolve();
     }
     return execScripts(entry, scripts, proxy, {
      fetch,
      strictGlobal,
      beforeExec: execScriptsHooks.beforeExec,
      afterExec: execScriptsHooks.afterExec,
     });
    },
   }));
  }));
}

// 代码片段3，所属文件：src/process-tpl.js
/*
  匹配整个script标签及其包含的内容，比如 <script>xxxxx</script>或<script xxx>xxxxx</script>

  [\s\S]    匹配所有字符。\s 是匹配所有空白符，包括换行，\S 非空白符，不包括换行
  *         匹配前面的子表达式零次或多次
  +         匹配前面的子表达式一次或多次

  正则表达式后面的全局标记 g 指定将该表达式应用到输入字符串中能够查找到的尽可能多的匹配。
  表达式的结尾处的不区分大小写 i 标记指定不区分大小写。   
*/
const ALL_SCRIPT_REGEX = /(<script[\s\S]*?>)[\s\S]*?<\/script>/gi;
/*
    . 匹配除换行符 \n 之外的任何单字符
    ? 匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。

    圆括号会有一个副作用，使相关的匹配会被缓存，此时可用 ?: 放在第一个选项前来消除这种副作用。
    其中 ?: 是非捕获元之一，还有两个非捕获元是 ?= 和 ?!， ?=为正向预查，在任何开始匹配圆括
    号内的正则表达式模式的位置来匹配搜索字符串，?!为负向预查，在任何开始不匹配该正则表达式模
    式的位置来匹配搜索字符串。
    举例：exp1(?!exp2)：查找后面不是 exp2 的 exp1。

    所以这里的真实含义是匹配script标签，但type不能是text/ng-template
*/
const SCRIPT_TAG_REGEX = /<(script)\s+((?!type=('|")text\/ng-template\3).)*?>.*?<\/\1>/is;
/*
* 匹配包含src属性的script标签

  ^ 匹配输入字符串的开始位置，但在方括号表达式中使用时，表示不接受该方括号表达式中的字符集合。
*/
const SCRIPT_SRC_REGEX = /.*\ssrc=('|")?([^>'"\s]+)/;
// 匹配含 type 属性的标签
const SCRIPT_TYPE_REGEX = /.*\stype=('|")?([^>'"\s]+)/;
// 匹配含entry属性的标签//
const SCRIPT_ENTRY_REGEX = /.*\sentry\s*.*/;
// 匹配含 async属性的标签
const SCRIPT_ASYNC_REGEX = /.*\sasync\s*.*/;
// 匹配向后兼容的nomodule标记
const SCRIPT_NO_MODULE_REGEX = /.*\snomodule\s*.*/;
// 匹配含type=module的标签
const SCRIPT_MODULE_REGEX = /.*\stype=('|")?module('|")?\s*.*/;
// 匹配link标签
const LINK_TAG_REGEX = /<(link)\s+.*?>/isg;
// 匹配含 rel=preload或rel=prefetch 的标签， 小提示：rel用于规定当前文档与被了链接文档之间的关系，比如rel=“icon”等
const LINK_PRELOAD_OR_PREFETCH_REGEX = /\srel=('|")?(preload|prefetch)\1/;
// 匹配含href属性的标签
const LINK_HREF_REGEX = /.*\shref=('|")?([^>'"\s]+)/;
// 匹配含as=font的标签
const LINK_AS_FONT = /.*\sas=('|")?font\1.*/;
// 匹配style标签
const STYLE_TAG_REGEX = /<style[^>]*>[\s\S]*?<\/style>/gi;
// 匹配rel=stylesheet的标签
const STYLE_TYPE_REGEX = /\s+rel=('|")?stylesheet\1.*/;
// 匹配含href属性的标签
const STYLE_HREF_REGEX = /.*\shref=('|")?([^>'"\s]+)/;
// 匹配注释
const HTML_COMMENT_REGEX = /<!--([\s\S]*?)-->/g;
// 匹配含ignore属性的 link标签
const LINK_IGNORE_REGEX = /<link(\s+|\s+.+\s+)ignore(\s*|\s+.*|=.*)>/is;
// 匹配含ignore属性的style标签
const STYLE_IGNORE_REGEX = /<style(\s+|\s+.+\s+)ignore(\s*|\s+.*|=.*)>/is;
// 匹配含ignore属性的script标签
const SCRIPT_IGNORE_REGEX = /<script(\s+|\s+.+\s+)ignore(\s*|\s+.*|=.*)>/is;

// 代码片段4，所属文件：src/process-tpl.js
export default function processTpl(tpl, baseURI, postProcessTemplate) {
    // 这里省略许多代码...
    let styles = [];
 const template = tpl
  .replace(HTML_COMMENT_REGEX, '') // 删掉注释
  .replace(LINK_TAG_REGEX, match => {
                // 这里省略许多代码...
                // 如果link标签中有ignore属性，则替换成占位符`<!-- ignore asset ${ href || 'file'} replaced by import-html-entry -->`
                // 如果link标签中没有ignore属性，将标签替换成占位符`<!-- ${preloadOrPrefetch ? 'prefetch/preload' : ''} link ${linkHref} replaced by import-html-entry -->`
  })
  .replace(STYLE_TAG_REGEX, match => {
                // 这里省略许多代码...
                // 如果style标签有ignore属性，则将标签替换成占位符`<!-- ignore asset style file replaced by import-html-entry -->`
  })
  .replace(ALL_SCRIPT_REGEX, (match, scriptTag) => {
                // 这里省略许多代码...
                // 这里虽然有很多代码，但可以概括为匹配正则表达式，替换成相应的占位符
  });

 // 这里省略一些代码...
 let tplResult = {
  template,
  scripts,
  styles,
  entry: entry || scripts[scripts.length - 1],
 };
 // 这里省略一些代码...
 return tplResult;
}

function getEmbedHTML(template, styles, opts = {}) {
 const { fetch = defaultFetch } = opts;
 let embedHTML = template;

 return getExternalStyleSheets(styles, fetch)
  .then(styleSheets => {
   embedHTML = styles.reduce((html, styleSrc, i) => {
    html = html.replace(genLinkReplaceSymbol(styleSrc), `<style>/* ${styleSrc} */${styleSheets[i]}</style>`);
    return html;
   }, embedHTML);
   return embedHTML;
  });
}

export function getExternalStyleSheets(styles, fetch = defaultFetch) {
 return Promise.all(styles.map(styleLink => {
   if (isInlineCode(styleLink)) {
    // if it is inline style
    return getInlineCode(styleLink);
   } else {
    // external styles
    return styleCache[styleLink] ||
     (styleCache[styleLink] = fetch(styleLink).then(response => response.text()));
   }

  },
 ));
}

{
    template: embedHTML,
    assetPublicPath,
    getExternalScripts: () => getExternalScripts(scripts, fetch),
    getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),
    execScripts: (proxy, strictGlobal, execScriptsHooks = {}) => {
        if (!scripts.length) {
            return Promise.resolve();
        }
        return execScripts(entry, scripts, proxy, {
            fetch,
            strictGlobal,
            beforeExec: execScriptsHooks.beforeExec,
            afterExec: execScriptsHooks.afterExec,
        });
    }
}

export function execScripts(entry, scripts, proxy = window, opts = {}) {
 // 此处省略许多代码...
 return getExternalScripts(scripts, fetch, error)// 和获取js资源链接对应的内容
  .then(scriptsText => {
   const geval = (scriptSrc, inlineScript) => {
    // 此处省略许多代码...
                // 这里主要是把js代码进行一定处理，然后拼装成一个自执行函数，然后用eval执行
                // 这里最关键的是调用了getExecutableScript，绑定了window.proxy改变js代码中的this引用
   };

   function exec(scriptSrc, inlineScript, resolve) {
    // 这里省略许多代码...
    // 根据不同的条件，在不同的时机调用geval函数执行js代码，并将入口函数执行完暴露的含有微应用生命周期函数的对象返回
    // 这里省略许多代码...
   }

   function schedule(i, resolvePromise) {
                // 这里省略许多代码...
                // 依次调用exec函数执行js资源对应的代码
   }

   return new Promise(resolve => schedule(0, success || resolve));
  });
}