概述
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 返回值包括以下内容:
- template:处理后的 HTML 内容。
- assetPublicPath:资源路径。
- getExternalScripts:返回外部脚本信息的函数。
- getExternalStyleSheets:返回外部样式表信息的函数。
- 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,
);
可以看到:
- 使用 importEntry 获取处理后的 HTML,包括 JS 执行器。
- 使用 execScripts 执行脚本,传递全局上下文。
- 从模块导出中提取生命周期函数(如 bootstrap、mount、unmount 等)。
核心功能
import-html-entry 的核心功能如下:
- 获取并处理 HTML:通过 fetch 获取 HTML 内容,解析模板并提取 HTML、CSS 和 JS,移除外部链接的 CSS 和 JS 文件。
- 内嵌 CSS:将