微前端

html entry

html 解析获取资源文件

1. 需要提取的资源类型

CSS：通过 link 标签中的 rel="stylesheet" 来识别，属性 href 为 CSS 文件路径。
JS：通过 script 标签，属性 src 为 JS 文件路径。
图片：通过 img 标签，属性 src 为图片路径。

2. 浏览器环境下的实现

如果你在浏览器环境下，可以直接通过 DOM 解析 HTML 字符串。下面是 JavaScript 的实现代码：

function extractResources(htmlString: string) {
    // 创建一个临时的 DOM 元素，加载 HTML 字符串
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlString, 'text/html');

    // 获取所有的 link 标签（CSS）
    const cssLinks = Array.from(doc.querySelectorAll('link[rel="stylesheet"]'))
        .map(link => link.getAttribute('href'))
        .filter(Boolean); // 过滤掉空的 href

    // 获取所有的 script 标签（JS）
    const jsScripts = Array.from(doc.querySelectorAll('script[src]'))
        .map(script => script.getAttribute('src'))
        .filter(Boolean); // 过滤掉空的 src

    // 获取所有的 img 标签（图片）
    const imgSources = Array.from(doc.querySelectorAll('img[src]'))
        .map(img => img.getAttribute('src'))
        .filter(Boolean); // 过滤掉空的 src

    // 返回一个包含所有资源的对象
    return {
        css: cssLinks,
        js: jsScripts,
        images: imgSources,
    };
}

// 测试 HTML 字符串
const htmlString = `
    <html>
      <head>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="theme.css">
        <script src="script.js"></script>
      </head>
      <body>
        <img src="image1.png">
        <img src="image2.jpg">
      </body>
    </html>
`;

// 提取资源
const resources = extractResources(htmlString);
console.log(resources);

3. Node.js 环境下的实现

在 Node.js 环境中，可以使用 jsdom 或类似库来解析 HTML 字符串，提取资源。

步骤：

安装 jsdom：
```
npm install jsdom
```
使用 jsdom 解析 HTML，提取资源：

import { JSDOM } from 'jsdom';

function extractResourcesFromHtml(htmlString: string) {
    // 使用 JSDOM 解析 HTML 字符串
    const dom = new JSDOM(htmlString);
    const document = dom.window.document;

    // 获取所有的 link 标签（CSS）
    const cssLinks = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
        .map(link => link.getAttribute('href'))
        .filter(Boolean); // 过滤掉空的 href

    // 获取所有的 script 标签（JS）
    const jsScripts = Array.from(document.querySelectorAll('script[src]'))
        .map(script => script.getAttribute('src'))
        .filter(Boolean); // 过滤掉空的 src

    // 获取所有的 img 标签（图片）
    const imgSources = Array.from(document.querySelectorAll('img[src]'))
        .map(img => img.getAttribute('src'))
        .filter(Boolean); // 过滤掉空的 src

    // 返回一个包含所有资源的对象
    return {
        css: cssLinks,
        js: jsScripts,
        images: imgSources,
    };
}

// 测试 HTML 字符串
const htmlString = `
    <html>
      <head>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="theme.css">
        <script src="script.js"></script>
      </head>
      <body>
        <img src="image1.png">
        <img src="image2.jpg">
      </body>
    </html>
`;

// 提取资源
const resources = extractResourcesFromHtml(htmlString);
console.log(resources);

Refer

qiankun 实现解析