介绍
nui-html-compare-plugin 是一款基于 Node.js 环境的前端开发工具，可以用来比较 HTML 文件中的差异，方便在开发过程中处理 DOM 树变化引发的问题。
这个插件可以读取两个 HTML 文件，对其进行比对，得出两个 DOM 树的差异，并以 HTML 格式输出差异结果，方便开发者在修改 HTML 代码时，快速定位引入的问题。
安装
可以通过 npm 安装 nui-html-compare-plugin：
npm install nui-html-compare-plugin
安装完成后，我们需要在需要使用的 JavaScript 文件中，引用该插件：
const compare = require('nui-html-compare-plugin');使用
比对两个 HTML 文件
首先，需要确保我们有两个 HTML 文件需要进行比对。假设这两个文件分别为 original.html 和 changed.html。
假设我们希望比对的原始文件为 original.html，变更后的文件为 changed.html。我们可以使用以下代码，将这两个文件进行比对：
compare.compareTwoFiles('original.html', 'changed.html');该函数会读取两个文件，进行比对，并将结果输出至终端。
处理输出结果
接下来，让我们来看看比对结果。该函数会将所有差异项输出至终端，格式为 HTML。我们可以将其赋值到一个变量中，再对其进行处理。
const result = compare.compareTwoFiles('original.html', 'changed.html');
// 如果要将结果保存至文件，可以使用以下代码：
const fs = require('fs');
fs.writeFileSync('result.html', result);比对结果的样例如下：
-- -------------------- ---- -------
------
------
-----
-----------
------
- -----
- ---- --------------------------------
-------
-------在这个样例中，我们可以看到变更后的 HTML 中，新增了一个 class="new-class" 的 div 元素。原先在该部分位置的元素被标记为注销，从而引出新增节点。
指定 Dom 差异的程度
比对函数的第三个参数可以指定 Dom 树比对的程度。可能的值包含 2 个，分别是 compareConstants.DIFF_DEEP 和 compareConstants.DIFF_SHALLOW。默认值为 compareConstants.DIFF_DEEP。这两个常量将影响比对的结果，应当根据需求进行选择。
示例代码
-- -------------------- ---- ------- ----- ------- - ------------------- ----- -- - -------------- ----- ------------ - ---------------- ----- ----------- - --------------- ----- ------ - ------------------------------------- ------------- -- -------------- -------------------- -- ------------- ------------------------------- --------
结论
nui-html-compare-plugin 是一款方便快捷的工具，用于解决前端开发中的 HTML 文件比对问题。在开发过程中，我们时常需要比对两个 HTML 文件的 DOM 树是否发生了变化，该工具可以快速定位问题，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcf967216659e244dea