微前端之import-html-entry

2023-06-02 Web

最近网络上对于微前端讨论的愈加激烈，qiankun 就是一款由蚂蚁金服推出的比较成熟的微前端框架，基于 single-spa 进行二次开发，用于将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。尤其适合遗留项目技术栈难以维护，又需要新的技术来迭代功能。

qiankun一大特点就是将html做为入口文件，规避了JavaScript为了支持缓存而根据文件内容动态生成文件名，造成入口文件无法锁定的问题。将html做为入口文件，其实就是将静态的html做为一个资源列表来使用了，这样也避免了一些潜在的问题。本文的主角就是支持qiankun将html做为入口所依赖的 import-html-entry 库，版本是1.7.3。

importHTML

import-html-entry的默认导出接口，返回值为一个promise对象。接口声明如下。

importHTML(url, opts = {})

importHTML(url, opts = {})

参数说明：

  • url ：需要解析的html模板路径
  • opts：默认值为一个空对象
  • 传入为函数类型的时候，直接做为fetch 使用
  • 传入为对象类型的时候，对象属性用于解析html模板的，如果没有传入，模块内置了默认属性。
属性 参数 返回值 功能 默认
fetch url:string promise 用于获取远端的脚本和样式文件内容 浏览器fetch，如果浏览器不支持，会报错
getPublicPath 模板url:string publicPath:string 用于获取静态资源publicPath，将模板中外部资源为相对路径的，转换为绝对路径。 以当前location.href为publicPath
getDomain ?? string 如果没有提供getPublicPath参数，则使用getDomain，两者都没有提供的时候，使用默认getPublicPath 无
getTemplate html模板字符串:string html模板字符串:string 用于支持使用者在模板解析前，做一次处理 无处理

接口返回promise<pending，resolve参数为一个对象，拥有以下属性。

属性 类型 说明 参数
template string 被处理后的html模板字符串，外联的样式文件被替换为内联样式 -
assetPublicPath string 静态资源的baseURL -
getExternalScripts function:promise 将模板中所有script标签按照出现的先后顺序，提取出内容，组成一个数组 -
getExternalStyleSheets function:promise 将模板中所有link和style标签按照出现的先后顺序，提取出内容，组成一个数组 -
execScripts function:promise 执行所有的script中的代码，并返回为html模板入口脚本链接entry指向的模块导出对象。 参见下文 
export default function importHTML(url, opts = {}) {
  let fetch = defaultFetch;
  let getPublicPath = defaultGetPublicPath;
  let getTemplate = defaultGetTemplate;

  // compatible with the legacy importHTML api
  if (typeof opts === 'function') {
    fetch = opts;
  } else {
    fetch = opts.fetch || defaultFetch;
    getPublicPath = opts.getPublicPath || opts.getDomain || defaultGetPublicPath;
    getTemplate = opts.getTemplate || defaultGetTemplate;
  }

  return embedHTMLCache[url] || (embedHTMLCache[url] = fetch(url)
    .then(response => response.text())
    .then(html => {
      const assetPublicPath = getPublicPath(url);
      const { template, scripts, entry, styles } = processTpl(getTemplate(html), assetPublicPath);

      return getEmbedHTML(template, styles, { fetch }).then(embedHTML => ({
        template: embedHTML,
        assetPublicPath,
        getExternalScripts: () => getExternalScripts(scripts, fetch),
        getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),
        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;

  // compatible with the legacy importHTML api
  if (typeof opts === 'function') {
    fetch = opts;
  } else {
    fetch = opts.fetch || defaultFetch;
    getPublicPath = opts.getPublicPath || opts.getDomain || defaultGetPublicPath;
    getTemplate = opts.getTemplate || defaultGetTemplate;
  }

  return embedHTMLCache[url] || (embedHTMLCache[url] = fetch(url)
    .then(response => response.text())
    .then(html => {
      const assetPublicPath = getPublicPath(url);
      const { template, scripts, entry, styles } = processTpl(getTemplate(html), assetPublicPath);

      return getEmbedHTML(template, styles, { fetch }).then(embedHTML => ({
        template: embedHTML,
        assetPublicPath,
        getExternalScripts: () => getExternalScripts(scripts, fetch),
        getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),
        execScripts: (proxy, strictGlobal) => {
          if (!scripts.length) {
            return Promise.resolve();
          }
          return execScripts(entry, scripts, proxy, { fetch, strictGlobal });
        }
      }));
    }));
}
  • 1~13 行，主要是用来处理传入参数类型及默认值的。
  • 15 行，对解析操作做了缓存处理，如果相同的url已经被处理过，则直接返回处理结果，否则通过fetch去获取模板字符串，并进行后续处理。
  • 20行，processTpl 方法是解析模板的核心函数，后面会具体说，这里主要返回了经过初步处理过的模板字符串template、外部脚本和样式的链接前缀assetPublicPath ，所有外部脚本的src值组成的数组scripts，所有外部样式的href值组成的数组styles，还有上面提到的html模板的入口脚本链接entry ，如果模板中没有被标记为entry的script标签，则会返回最后一个script标签的src值。
  • 22 行，调用getEmbedHTML函数将所有通过外部引入的样式，转换为内联样式。embedHTML 函数的代码比较简单，可以直接去看。
  • 25~31行，这里使用了getExternalScripts 、getExternalStyleSheets 、execScripts 三个函数，一一来看下。

getExternalStyleSheets 

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()));
    }
  },
  ));
}


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()));
    }
  },
  ));
}

函数的第一个参数是 模板中所有link和style标签组成的数组，第二个参数是用于请求的fetch，函数比较简单，主要是通过对link和style的区分，分别来获取样式的具体内容组成数组，并返回。

后面发现，在解析模板的时候style标签的内容并没有被放入styles中，不知道是不是一个失误，issue准备中_

getExternalScripts 

export function getExternalScripts(scripts, fetch = defaultFetch) {
  const fetchScript = scriptUrl => scriptCache[scriptUrl] ||
    (scriptCache[scriptUrl] = fetch(scriptUrl).then(response => response.text()));

  return Promise.all(scripts.map(script => {
    if (typeof script === 'string') {
      if (isInlineCode(script)) {
        // if it is inline script
        return getInlineCode(script);
      } else {
        // external script
        return fetchScript(script);
      }
    } else {
      // use idle time to load async script
      const { src, async } = script;
      if (async) {
        return {
          src,
          async: true,
          content: new Promise((resolve, reject) => requestIdleCallback(() => fetchScript(src).then(resolve, reject)))
        };
      }

      return fetchScript(src);
    }
  },
  ));
}


export function getExternalScripts(scripts, fetch = defaultFetch) {
  const fetchScript = scriptUrl => scriptCache[scriptUrl] ||
    (scriptCache[scriptUrl] = fetch(scriptUrl).then(response => response.text()));

  return Promise.all(scripts.map(script => {
    if (typeof script === 'string') {
      if (isInlineCode(script)) {
        // if it is inline script
        return getInlineCode(script);
      } else {
        // external script
        return fetchScript(script);
      }
    } else {
      // use idle time to load async script
      const { src, async } = script;
      if (async) {
        return {
          src,
          async: true,
          content: new Promise((resolve, reject) => requestIdleCallback(() => fetchScript(src).then(resolve, reject)))
        };
      }

      return fetchScript(src);
    }
  },
  ));
}

函数的第一个参数是模板中所有script标签组成的数组，第二个参数是用于请求的fetch。

  • 3行，主要是包装了一下fetch，提供了缓存的能力
  • 8行，这个判断主要是为了区别处理在importEntry中调用函数的时候，提供的可能是通过对象方式配置的资源，例如scripts可能会是这个样子[{src:"http://xxx.com/static/xx.js",async:true},...] 。

execScripts

这段代码太长，下面的代码中，将和性能测试相关的部分删除掉了，只留下了功能代码。

export function execScripts(entry, scripts, proxy = window, opts = {}) {
  const { fetch = defaultFetch, strictGlobal = false } = opts;

  return getExternalScripts(scripts, fetch)
    .then(scriptsText => {

      const geval = eval;

      function exec(scriptSrc, inlineScript, resolve) {

        if (scriptSrc === entry) {
          noteGlobalProps(strictGlobal ? proxy : window);

// bind window.proxy to change `this` reference in script
          geval(getExecutableScript(scriptSrc, inlineScript, proxy, strictGlobal));

          const exports = proxy[getGlobalProp(strictGlobal ? proxy : window)] || {};
          resolve(exports);

        } else {

          if (typeof inlineScript === 'string') {
// bind window.proxy to change `this` reference in script
            geval(getExecutableScript(scriptSrc, inlineScript, proxy, strictGlobal));
          } else {
// external script marked with async
            inlineScript.async && inlineScript?.content
              .then(downloadedScriptText => geval(getExecutableScript(inlineScript.src, downloadedScriptText, proxy, strictGlobal)))
              .catch(e => {
                console.error(`error occurs while executing async script ${ inlineScript.src }`);
                throw e;
              });
          }
        }
      }

      function schedule(i, resolvePromise) {

        if (i < scripts.length) {
          const scriptSrc = scripts[i];
          const inlineScript = scriptsText[i];

          exec(scriptSrc, inlineScript, resolvePromise);
// resolve the promise while the last script executed and entry not provided
          if (!entry && i === scripts.length - 1) {
            resolvePromise();
          } else {
            schedule(i + 1, resolvePromise);
          }
        }
      }

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


export function execScripts(entry, scripts, proxy = window, opts = {}) {
  const { fetch = defaultFetch, strictGlobal = false } = opts;

  return getExternalScripts(scripts, fetch)
    .then(scriptsText => {

      const geval = eval;

      function exec(scriptSrc, inlineScript, resolve) {

        if (scriptSrc === entry) {
          noteGlobalProps(strictGlobal ? proxy : window);

// bind window.proxy to change `this` reference in script
          geval(getExecutableScript(scriptSrc, inlineScript, proxy, strictGlobal));

          const exports = proxy[getGlobalProp(strictGlobal ? proxy : window)] || {};
          resolve(exports);

        } else {

          if (typeof inlineScript === 'string') {
// bind window.proxy to change `this` reference in script
            geval(getExecutableScript(scriptSrc, inlineScript, proxy, strictGlobal));
          } else {
// external script marked with async
            inlineScript.async && inlineScript?.content
              .then(downloadedScriptText => geval(getExecutableScript(inlineScript.src, downloadedScriptText, proxy, strictGlobal)))
              .catch(e => {
                console.error(`error occurs while executing async script ${ inlineScript.src }`);
                throw e;
              });
          }
        }
      }

      function schedule(i, resolvePromise) {

        if (i < scripts.length) {
          const scriptSrc = scripts[i];
          const inlineScript = scriptsText[i];

          exec(scriptSrc, inlineScript, resolvePromise);
// resolve the promise while the last script executed and entry not provided
          if (!entry && i === scripts.length - 1) {
            resolvePromise();
          } else {
            schedule(i + 1, resolvePromise);
          }
        }
      }

      return new Promise(resolve => schedule(0, resolve));
    });
}
  • 4行，调用getExternalScripts来获取所有script标签内容组成的数组。
  • 53行，我们先从这里的函数调用开始，这里通过schedule 函数开始从脚本内容数组的第一个开始执行。
  • 37~51行，这段定义了schedule函数，通过代码可以看出，这是一个递归函数，结束条件是数组循环完毕，注意看45行，和模板解析函数一样的逻辑，如果entry不存在，则指定数组的最后一个为脚本入口模块，将执行结果通过放在 Promise 中返回。
  • exec函数比较简单，主要是对entry和非entry的脚本做了区分，对entry模块的执行结果进行返回，见代码18行。

整个代码逻辑比较简单，主要关注entry的处理即可。

另外，代码中通过间接的方式使用了eval 执行了getExecutableScript 函数处理过的脚本字符串，间接的方式确保了eval中代码执行在全局上下文中，而不会影响局部，如果这块不是很清楚，参见神奇的eval()与new Function()，【译】以 eval() 和 new Function() 执行JavaScript代码 ，永远不要使用eval

getExecutableScript

这个函数的主要作用，是通过修改脚本字符串，改变脚本执行时候的window/self/this 的指向。

function getExecutableScript(scriptSrc, scriptText, proxy, strictGlobal) {
  const sourceUrl = isInlineCode(scriptSrc) ? '' : `//# sourceURL=${scriptSrc}\n`;

  window.proxy = proxy;
  // TODO 通过 strictGlobal 方式切换切换 with 闭包，待 with 方式坑趟平后再合并
  return strictGlobal
    ? `;(function(window, self){with(window){;${scriptText}\n${sourceUrl}}}).bind(window.proxy)(window.proxy, window.proxy);`
    : `;(function(window, self){;${scriptText}\n${sourceUrl}}).bind(window.proxy)(window.proxy, window.proxy);`;
}


function getExecutableScript(scriptSrc, scriptText, proxy, strictGlobal) {
  const sourceUrl = isInlineCode(scriptSrc) ? '' : `//# sourceURL=${scriptSrc}\n`;

  window.proxy = proxy;
  // TODO 通过 strictGlobal 方式切换切换 with 闭包，待 with 方式坑趟平后再合并
  return strictGlobal
    ? `;(function(window, self){with(window){;${scriptText}\n${sourceUrl}}}).bind(window.proxy)(window.proxy, window.proxy);`
    : `;(function(window, self){;${scriptText}\n${sourceUrl}}).bind(window.proxy)(window.proxy, window.proxy);`;
}

核心代码主要是这里;(function(window, self){;${ scriptText }\n${ sourceUrl }}).bind(window.proxy)(window.proxy, window.proxy);。

拆开来看。

// 声明一个函数
let scriptText = "xxx";
let sourceUrl = "xx";
let fn = function(window, self){
    // 具体脚本内容
};
// 改变函数中 this 的指向
let fnBind = fn.bind(window.proxy);
// 指向函数，并指定参数中 window 和 self
fnBind(window.proxy, window.proxy);

// 声明一个函数
let scriptText = "xxx";
let sourceUrl = "xx";
let fn = function(window, self){
    // 具体脚本内容
};
// 改变函数中 this 的指向
let fnBind = fn.bind(window.proxy);
// 指向函数，并指定参数中 window 和 self
fnBind(window.proxy, window.proxy);

通过这一波操作，给脚本字符串构件了一个简单的执行环境，该环境屏蔽了全局了this 、window和self。但是这里默认传入的依然是window，只是在调用的时候可以通过参数传入。

importEntry 

export function importEntry(entry, opts = {}) {
// ...

// html entry
  if (typeof entry === 'string') {
    return importHTML(entry, { fetch, getPublicPath, getTemplate });
  }

// config entry
  if (Array.isArray(entry.scripts) || Array.isArray(entry.styles)) {

    const { scripts = [], styles = [], html = '' } = entry;
    const setStylePlaceholder2HTML = tpl => styles.reduceRight((html, styleSrc) => `${ genLinkReplaceSymbol(styleSrc) }${ html }`, tpl);
    const setScriptPlaceholder2HTML = tpl => scripts.reduce((html, scriptSrc) => `${ html }${ genScriptReplaceSymbol(scriptSrc) }`, tpl);

    return getEmbedHTML(getTemplate(setScriptPlaceholder2HTML(setStylePlaceholder2HTML(html))), styles, { fetch }).then(embedHTML => ({
// 这里处理同 importHTML , 省略
    },
  }));

} else {
  throw new SyntaxError('entry scripts or styles should be array!');
}
}


export function importEntry(entry, opts = {}) {
// ...

// html entry
  if (typeof entry === 'string') {
    return importHTML(entry, { fetch, getPublicPath, getTemplate });
  }

// config entry
  if (Array.isArray(entry.scripts) || Array.isArray(entry.styles)) {

    const { scripts = [], styles = [], html = '' } = entry;
    const setStylePlaceholder2HTML = tpl => styles.reduceRight((html, styleSrc) => `${ genLinkReplaceSymbol(styleSrc) }${ html }`, tpl);
    const setScriptPlaceholder2HTML = tpl => scripts.reduce((html, scriptSrc) => `${ html }${ genScriptReplaceSymbol(scriptSrc) }`, tpl);

    return getEmbedHTML(getTemplate(setScriptPlaceholder2HTML(setStylePlaceholder2HTML(html))), styles, { fetch }).then(embedHTML => ({
// 这里处理同 importHTML , 省略
    },
  }));

} else {
  throw new SyntaxError('entry scripts or styles should be array!');
}
}

第一个参数entry 可以是字符串和对象，类型为字符串的时候与importHTML功能相同。为对象的时候，传入的是脚本和样式的资源列表。如下所示

{
    html:"http://xxx.com/static/tpl.html",
   scripts:[
        {
            src:"http://xxx.com/static/xx.js",
            async:true
        },
       ...
   ],
    styles:[
        { 
       href:"http://xxx.com/static/style.css"
        },
        ...
    ]
} 

{
    html:"http://xxx.com/static/tpl.html",
   scripts:[
        {
            src:"http://xxx.com/static/xx.js",
            async:true
        },
       ...
   ],
    styles:[
        { 
       href:"http://xxx.com/static/style.css"
        },
        ...
    ]
}

其他

src/process-tpl.js 模块主要做了一件事，就是对资源进行分类收集并返回，没有什么难懂的地方。
src/utils 主要是提供了一些工具函数，其中getGlobalProp和noteGlobalProps比较有意思，用于根据entry执行前后window上属性的变化，来获取entry的导出结果。这两个函数主要依据的原理是对象属性的顺序是可预测的，传送门解惑

export function getGlobalProp(global) {
  let cnt = 0;
  let lastProp;
  let hasIframe = false;

  for (const p in global) {
    if (shouldSkipProperty(global, p)) { continue; }

    // 遍历 iframe，检查 window 上的属性值是否是 iframe，是则跳过后面的 first 和 second 判断
    for (let i = 0; i < window.frames.length && !hasIframe; i++) {
      const frame = window.frames[i];
      if (frame === global[p]) {
        hasIframe = true;
        break;
      }
    }

    if (!hasIframe && (cnt === 0 && p !== firstGlobalProp || cnt === 1 && p !== secondGlobalProp)) { return p; }
    cnt++;
    lastProp = p;
  }

  if (lastProp !== lastGlobalProp) { return lastProp; }
}

export function noteGlobalProps(global) {
// alternatively Object.keys(global).pop()
// but this may be faster (pending benchmarks)
  firstGlobalProp = secondGlobalProp = undefined;

  for (const p in global) {
    if (shouldSkipProperty(global, p)) { continue; }
    if (!firstGlobalProp) { firstGlobalProp = p; } else if (!secondGlobalProp) { secondGlobalProp = p; }
    lastGlobalProp = p;
  }

  return lastGlobalProp;
}


export function getGlobalProp(global) {
  let cnt = 0;
  let lastProp;
  let hasIframe = false;

  for (const p in global) {
    if (shouldSkipProperty(global, p)) { continue; }

    // 遍历 iframe，检查 window 上的属性值是否是 iframe，是则跳过后面的 first 和 second 判断
    for (let i = 0; i < window.frames.length && !hasIframe; i++) {
      const frame = window.frames[i];
      if (frame === global[p]) {
        hasIframe = true;
        break;
      }
    }

    if (!hasIframe && (cnt === 0 && p !== firstGlobalProp || cnt === 1 && p !== secondGlobalProp)) { return p; }
    cnt++;
    lastProp = p;
  }

  if (lastProp !== lastGlobalProp) { return lastProp; }
}

export function noteGlobalProps(global) {
// alternatively Object.keys(global).pop()
// but this may be faster (pending benchmarks)
  firstGlobalProp = secondGlobalProp = undefined;

  for (const p in global) {
    if (shouldSkipProperty(global, p)) { continue; }
    if (!firstGlobalProp) { firstGlobalProp = p; } else if (!secondGlobalProp) { secondGlobalProp = p; }
    lastGlobalProp = p;
  }

  return lastGlobalProp;
}
  • noteGlobalProps用于标记执行entry前window的属性状态，执行entry模块后，会导出结果并挂载到window上。
  • getGlobalProp 用于检测entry模块执行后window的变化，根据变化找出entry的指向结果并返回。

完

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# Javascript # 微前端
···