前言
在前端开发中，通常需要引用一些静态资源，如图片、CSS、JS 文件等。在我们的代码中，我们通常会填写如下路径：
---- ------------------ ----------- ----- ---------------- --------------------- ------- ----------------------------
但如果你的网站或应用程序需要使用 CDN，或者你的资源包含不同的哈希值以实现 cache-busting 等，你需要动态地修改静态资源的路径，而 swg-rev-path 这个 npm 包就能帮助我们达到这个目的。
swg-rev-path 简介
swg-rev-path 是一个 Node.js 模块，可用于修改文件名以及文件路径中的哈希值。它会分析指定的 HTML、CSS 或 JavaScript 文件，并更新您引用的静态资源的路径，以便于您可以在发布之前使用版本化 URL、CDN 等技术达到 cache-busting 的效果。
安装 swg-rev-path
使用 npm 全局安装 swg-rev-path:
--- ------- -- ------------
使用 swg-rev-path
以 index.html 文件为例，这篇文章演示如何使用 swg-rev-path 更改引用的静态资源的路径。
- 首先，在
index.html中，你需要使用@@符号表示你要更新的文件路径。例如：
----- ---------------- ------------------------ ---- --------------------- ----------- ------- -------------------------------
注意：如果你的文件路径不包含
@@符号，则该路径将被视为绝对路径，并且不会更新，所以一定要将资源路径用@@包裹起来。
- 接下来，在命令行里输入以下命令:
------------ -- ---------- -- -----
这个命令的意思是，修改 index.html 文件中引用的静态资源的路径，并将更新后的文件输出到 /dist 目录中。
- 完成上述步骤后，你会发现
/dist目录中的index.html中的资源路径已被更新为以下方式：
----- ---------------- ------------------------------- ---- ---------------------------- ----------- ------- --------------------------------------
如你所见，在每个文件名后面加上了哈希值（如 .93e94525 和 .9b31f301），这样浏览器可以根据哈希值来判断是否需要更新缓存。同时，文件路径也被更新为绝对路径，这样可以避免路径错误问题的发生。
高级使用
如果你使用 swg-rev-path 进行深度优化，并且需要根据不同的环境进行不同的更新，则你可以指定多个环境并使用 -c 参数指定配置文件。
- 创建一个
rev-path.config.js文件，配置如下所示：
-------------- - -
-------- -
---- -
----- -------------
----- -------
-
--
--- -
---- -
----- -------------
----- ----------
--
------- -
---- -----------
------- ------------- ----------
-
--
-------- -
---- -
----- -------------
----- ---------------
--
------- -
------- ----
--
---- -
-------- --------- ----------
-
-
-在上述示例配置文件中，我们配置了三个环境：
default为默认环境，设置了文件index.html的路径，默认更新所有引用的资源路径。qa环境，设置了文件index.html的路径为/qa/dist。同时，将所有.css后缀文件修改为.min.css，同时排除img/*.svg和js/*.js文件不做修改。staging环境，设置了文件index.html的路径为/staging/dist。同时，将所有文件前缀修改为s_。并且只更新.css和js/*.js文件。
- 接下来，在命令行里输入以下命令，就可以根据你的环境名轻松切换不同环境的配置:
------------ -- ------------------ -- --
这个命令的意思是，使用 rev-path.config.js 文件中 qa 环境的配置文件，更新文件 index.html 中应用的所有资源路径，并将更新后的文件输出到 /qa/dist 目录中。
总结
使用 swg-rev-path 包，可以轻松地重命名静态资源文件名，并更新引用文件的文件路径，以便于实现 cache-busting。配置文件的使用，可以实现高级的操作，多个环境间互相独立，实现高效的开发、测试和发布。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e281e8991b448d7783