前端开发过程中，通常会使用到很多的静态资源，如图片、CSS、JS等。在开发和构建过程中，这些静态资源的路径管理是非常重要的一个环节。npm 包 html-static-asset-path-extractor 就是一款用于提取 HTML 文件中静态资源路径的工具。
安装
在开始使用该工具之前，需要先安装：
npm install html-static-asset-path-extractor --save-dev
使用方法
使用 html-static-asset-path-extractor 非常简单。其中，extractPaths 函数是该包的重要成员，可以根据提供的 HTML 文件路径获取其中的静态资源路径列表。该函数具有以下参数：
filePath：HTML 文件路径。opts：可选参数，用于配置提取的静态资源类型和路径正则表达式等。默认情况下，会提取 HTML 文件中img、link、script标签中的静态资源路径。
以下是一段示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - --------------------------------------------
----- -------- - -------------------- ---------------------
----- ---- - -
--------- -
-
------ ------
----- ------
------ ---------
--
--
--------- --------
--
----- --------- - --- ------------
----- ----- - -------------------------------- ------
-------------------在以上示例代码中，我们通过引入 path 和 html-static-asset-path-extractor 模块，并指定了 HTML 文件路径 htmlPath。同时，我们定义了一个可选参数 opts，用于配置提取的资源类型和路径正则表达式。在这里，我们只提取了 img 标签中的属性 src 的路径信息，并使用正则表达式对提取的路径进一步加工。最后，我们通过创建 Extractor 实例，调用 extractPaths 函数，并将结果输出在控制台中。
实际运用
在实际的前端项目中，我们通常会将 HTML、CSS、JS、图片等资源分别放在不同的目录中，为了使得这些资源路径能够正确地被引用，我们需要正确地设置这些资源的根路径。通过 html-static-asset-path-extractor，我们可以方便地实现这一目的：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - --------------------------------------------
----- ----------------- - -------------------------------
----- -------- - -------------------- --------------------
----- -------- - ----
----- --------- - --- ------------
----- ----------------- - --- -------------------
--------- ---------
------- -----
---------
--------------- -------
------- -
--------------- -----
------------------- -----
---------- -----
--------- -----
--
---
----- ------------------------ - --------------------------
----- -------------- - -------------------------------- ----
----- ------------- - -
-- ------- --
------- -
----- ----------------------- ---------
--------- ------------------------
----------- ---------
--
-------- --------------------
--
---------------------- ------ ------------------------------------
-- -- ---- --------
----------------------------------------------- -- -
-------------------------- -- -
-- ------------------- --- -------- -
----- -------- - --------------------------------------- ------
----- ---- - ------------------------- ---------
----- ------------ - ---------------------------- --------------- ---------------------------------
-------------------------- --------------
-
---
---在以上示例代码中，我们使用了 HtmlWebpackPlugin 插件，用于根据提供的 HTML 模板文件生成 HTML 文件，并自动引入打包后的代码。我们提供了一个参数 baseHref，用于设置 HTML 文件中静态资源的根路径。同时，我们使用了 html-static-asset-path-extractor 提供的 extractPaths 和 replacePaths 方法，实现了在 HTML 文件中以相对路径的方式引用静态资源。
总结
通过使用 html-static-asset-path-extractor，我们可以轻松地实现静态资源路径的管理和优化。合理地配置静态资源的路径，既可以加快网页的加载速度，又可以提高开发效率。希望本文能够帮助读者更好地使用该工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c6781e8991b448d9e88