前言
在现代前端开发过程中，使用各种工具包是必不可少的。然而，选择一个好用的工具包也是一项挑战。今天我们来介绍一个非常实用的 npm 包 @posthtml/esm，它能够对 HTML 进行转换、优化和操作，让我们在开发中更加便捷高效。
@posthtml/esm 的安装
使用 npm 安装即可：
npm install @posthtml/esm --save
@posthtml/esm 的基本使用
安装成功后，我们可以在项目中引入：
import posthtml from '@posthtml/esm';
@posthtml/esm 提供了一些预定义的插件，用于 HTML 代码的操作，例如：
- posthtml-plugin-attrs-sorter
- posthtml-plugin-img-autosize
- posthtml-plugin-link-noreferrer
- posthtml-plugin-remove-attributes
- posthtml-plugin-remove-comments
- posthtml-plugin-remove-whitespace
- ...
这些插件可通过数组的形式传入 posthtml 函数，例如：
const result = await posthtml([ require('posthtml-plugin-attrs-sorter')(), require('posthtml-plugin-remove-comments')() ]).process(html);
这个例子中，我们使用了 posthtml-plugin-attrs-sorter 和 posthtml-plugin-remove-comments 这两个插件，对 HTML 进行操作。
除了预定义的插件，我们还可以自定义插件。一个简单的例子：
-- -------------------- ---- ------- -------- ---------- - ------ -------------- - ------------ ---- ---- -- ------ -- - -------- - ----- ------ ----- --- -- - ----- ------ - ----- -------------------------------------展开代码
这段代码实现了将 HTML 内所有的 h1 标签转化为 h2。可以看到，自定义插件也只是一个返回函数的函数，这个函数接受一个树结构对象，进行遍历操作。
示例代码
下面我们来看一个实际的例子，将一个 HTML 文件中的所有 img 标签中的 src 属性转换为懒加载：
-- -------------------- ---- ------- ----- -------- - ------------------------- -------- ------------- - ------ -------------- - ------------ ---- ----- -- ------ -- - ----- ----- - ---------- -- --- -- ----------- - ---------------------- - ---------- --------- - --- ------------- - ------- - ---------- - ------ ------ ----- --- -- - ----- -------- ----------------- - ----- ------ - ----- ---------------------------------------- ------ ------------ - ----- ---- - - ----- ---- ------------------------------------ -- ---- ------------------------------------ -- ---- ------------------------------------ -- -------- ----------------------------- -- ---------------------展开代码
这段代码中，我们使用了一个自定义的插件，实现了将 img 标签中的 src 属性转换为 data-original，同时添加了一个 loading=lazy 属性来实现图片的懒加载效果。最终输出的 HTML 如下：
<div> <img data-original="https://example.com/image1.jpg" loading="lazy"> <img data-original="https://example.com/image2.jpg" loading="lazy"> <img data-original="https://example.com/image3.jpg" loading="lazy"> </div>
小结
@posthtml/esm 做为一个 HTML 处理工具，功能非常强大。通过添加各种插件，可以实现对 HTML 的各种操作和优化。不仅如此，@posthtml/esm 还支持扩展性非常好，我们可以根据自己的需要，轻松地添加自定义插件。
我们在开发中使用 @posthtml/esm 可以大大提高我们的效率，减少冗余代码，让我们的前端开发更加高效简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/posthtml-esm
