微前端学习笔记：从import-html-entry发微DOM/JS/CSS隔离

import { readFileSync } from 'fs';
import { resolve } from 'path';
import { writeFile } from 'fs/promises';
import { fileURLToPath } from 'url';
 
const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
// 假设这是我们的入口文件路径
const entryPath = resolve(__dirname, 'src/index.html');
 
// 读取入口文件
const entryContent = readFileSync(entryPath, 'utf-8');
 
// 替换脚本和链接标签，以便在微前端环境中工作
const microFrontendEntryContent = entryContent
  .replace(/<script(.|\n)*?<\/script>/g, '')
  .replace(/<link(.|\n)*?rel="stylesheet"/, '');
 
// 将修改后的内容写入新文件
await writeFile(resolve(__dirname, 'dist/index.html'), microFrontendEntryContent, 'utf-8');

这段代码展示了如何读取一个HTML文件，移除其中的<script>和<link rel="stylesheet">标签，并将处理后的内容写入一个新文件。这是构建微前端时常用的一种策略，用以隔离微应用之间的资源依赖。