前言
NPM 是 Node.js 软件包管理器，可以用来安装、分享、发现和重用 JavaScript 的模块。在前端开发中，我们经常会使用大量的第三方包来帮助我们完成任务。posthtml-urls 就是一个很好的 npm 包，可以帮助我们处理 HTML 中的 URL。
posthtml-urls 是什么
PostHTML 是一个 HTML 的标记语言解析器。它编写在 JavaScript 中，并可以作为一个 Node.js 包使用。posthtml-urls 是 PostHTML 的插件之一，它旨在为 HTML 中的 URL 提供更多的操作和自定义能力。
posthtml-urls 可以帮你完成以下工作：
- 将相对路径转为绝对路径
- 提供 base 参数的支持
- 提供路径处理函数的支持
安装
--- ------- -------- ------------- ----------
使用
安装完成后，在项目中新建一个 posthtml.config.js 的配置文件，并加入以下内容：
----- -------- - --------------------
----- ---- - -------------------------
----------
------
-------- ----- -- -
------ - ---- ------------------------- - --- --
-
--
--
-------------- - -- ------- -- --
------------ -- --------------------------这个例子中我们只是简单使用了 http://cdn.example.com/ 拼接了所有 URL。当然，你可以添加任何其他的逻辑来自定义 URL 的输出。
参数
- filter: 一个正则表达式，来筛选需要转化的 URL。例如 //assets// 可以仅仅将 assets 相关的 URL 进行处理。
- base: 一个基本 URL ，默认情况下为实际 HTML 文件所在的目录。
- eachURL: 一个用来处理每一个 URL 的函数。能够接收到一个 url 字符串，并返回一个包含 url 属性的对象。
- attrs: 需要处理的属性列表。默认会处理 href, src, srcset。
示例
--------- ----- ------ ------ ----- ---------------- ---------------------- ------- ------ ---- --------------------- -- ----------------------------- ------- ---------------------------- ------- -------
----- -------- - --------------------
----- ---- - -------------------------
----- ---- - ---------- ---------------------- ------------------------------------------------------- ----------------------- ------------------------------------ --------------------------------------------
----------
------
----- ----------------------
-------- ----- -- -
------ - ---- ------------------------- - --- --
-
--
--
-------------- - -- ------- -- --
------------ -- --------------------------
--
-----
--------- -----
------
------
----- ----------------
----------------------
-------
------
---- ------------------------------------------
-- ------------------------------------------------
------- -------------------------------------------------
-------
-------
--结论
posthtml-urls 是一个非常方便的 npm 包，可以帮助开发者快速地处理 URL。希望通过本篇教程能够对 posthtml-urls 的使用有更深入的了解，从而提升前端开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600673e1fb81d47349e53d46