如何在NodeJS中编辑HTML文件？实现自制文件打包器需求

方案一：使用 Cheerio（轻量类jQuery DOM操作库） #

Cheerio 专为NodeJS环境设计，提供了和jQuery几乎一致的语法，能快速解析、操作HTML结构，完全替代正则实现你需要的类似document.head.appendChild的操作。

实现步骤： #

1. 安装依赖

npm install cheerio

2. 核心代码

const fs = require('fs');
const cheerio = require('cheerio');

// 读取原始HTML文件
const rawHtml = fs.readFileSync('./index.html', 'utf8');
// 加载HTML到Cheerio实例
const $ = cheerio.load(rawHtml);

// 插入CSS到head
const cssContent = fs.readFileSync('./styles.css', 'utf8');
$('head').append(`<style>${cssContent}</style>`);

// 插入JS到head
const jsContent = fs.readFileSync('./index.js', 'utf8');
$('head').append(`<script>${jsContent}</script>`);

// 输出打包后的HTML
fs.writeFileSync('./bundle.html', $.html());

方案二：使用 JSDOM（模拟完整浏览器DOM环境） #

如果你希望完全复用浏览器端的DOM API（比如createElement、appendChild），可以用jsdom在NodeJS中模拟完整的浏览器DOM环境，操作方式和浏览器端完全一致。

实现步骤： #

1. 安装依赖

npm install jsdom

2. 核心代码

const fs = require('fs');
const { JSDOM } = require('jsdom');

// 读取原始HTML文件
const rawHtml = fs.readFileSync('./index.html', 'utf8');
// 创建DOM实例，获取document对象
const dom = new JSDOM(rawHtml);
const document = dom.window.document;

// 创建style标签并插入CSS内容
const styleElement = document.createElement('style');
styleElement.textContent = fs.readFileSync('./styles.css', 'utf8');
document.head.appendChild(styleElement);

// 创建script标签并插入JS内容
const scriptElement = document.createElement('script');
scriptElement.textContent = fs.readFileSync('./index.js', 'utf8');
document.head.appendChild(scriptElement);

// 序列化DOM并写入打包文件
fs.writeFileSync('./bundle.html', dom.serialize());

这两个方案都无需使用正则，完全通过类DOM操作实现HTML文件的修改，满足你自制文件打包器的需求。

内容的提问来源于stack exchange，提问作者DrakoHyena