前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

揭秘微前端import-html-entry的强大之处

概述

import-html-entry 是一个用于动态加载和处理 HTML 和 JavaScript 文件的库,主要应用于微前端架构中。

它通过从远程服务器获取 HTML 内容,解析其中的 JavaScript 和 CSS,支持在主应用中无缝集成和执行。

作为 qiankun 微前端框架的核心依赖之一,import-html-entry 提供了强大的动态加载与执行功能。

qiankun 框架中,它通过 HTML Entry 的方式解决了 JS Entry 的问题,使得集成微应用变得像嵌入 iframe 一样简单。


使用方法

安装

可以通过 npm 或 yarn 安装 import-html-entry:

npm install import-html-entry

或:

yarn add import-html-entry

基本用法

以下是一个简单的示例,演示如何使用 import-html-entry 加载远程 HTML 文件。官方示例中,index.html 使用 import-html-entry 加载 ./template.html:

index.html




    
    index


<script type="module">
    window.onerror = (e) => console.log('error', e.message);
    window.onunhandledrejection = (e) => console.log('unhandledrejection', e.reason.message);

    import('./dist/index.js').then(({ importEntry }) => {
        importEntry('./template.html')
            .then((res) => {
                console.log(res);
                return res.execScripts().then((exports) => {
                    console.log(exports);
                });
            })
            .catch((e) => console.log('importEntry failed', e.message));
    });
</script>


template.html




    
    test
    
    


<script src="./a.js"></script>
<script ignore>alert(1)</script>
<script src="./b.js"></script>
<script src="./c.js"></script>
<script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/mobx@5.0.3/lib/mobx.umd.js"></script>
<script src="https://www.baidu.com"></script>



import-html-entry 处理后的template.html




    
    test
    
    











经过处理,HTML 文件中的 CSS 被转换为内联样式,而 <script> 标签被注释。

importEntry 返回值包括以下内容:

  1. template:处理后的 HTML 内容。
  2. assetPublicPath:资源路径。
  3. getExternalScripts:返回外部脚本信息的函数。
  4. getExternalStyleSheets:返回外部样式表信息的函数。
  5. execScripts:执行 HTML 中脚本的 JavaScript 执行器,可通过传入代理对象实现 JavaScript 沙箱化。

通过上述处理,import-html-entry 能够访问 HTML 中的 CSS 和 JavaScript 内容,其中 CSS 被内联化,而 JavaScript 可以通过 execScripts 在隔离环境中执行,实现沙箱化效果。


在 qiankun 中的使用

观察 qiankun 源代码中 import-html-entry 的使用:

// src/loader.js 第 266 行
const { template, execScripts, assetPublicPath, getExternalScripts } = await importEntry(entry, importEntryOpts);

// 第 347 行
const scriptExports: any = await execScripts(global, sandbox && !useLooseSandbox, {
    scopedGlobalVariables: speedySandbox ? cachedGlobals : [],
});

// 从模块导出中提取生命周期钩子
const { bootstrap, mount, unmount, update } = getLifecyclesFromExports(
  scriptExports,
  appName,
  global,
  sandboxContainer?.instance?.latestSetProp,
);

可以看到:

  1. 使用 importEntry 获取处理后的 HTML,包括 JS 执行器。
  2. 使用 execScripts 执行脚本,传递全局上下文。
  3. 从模块导出中提取生命周期函数(如 bootstrap、mount、unmount 等)。

核心功能

import-html-entry 的核心功能如下:

  1. 获取并处理 HTML:通过 fetch 获取 HTML 内容,解析模板并提取 HTML、CSS 和 JS,移除外部链接的 CSS 和 JS 文件。
  2. 内嵌 CSS:将