npm 包 swg-rev-path 使用教程

阅读时长 5 分钟读完

前言

在前端开发中,通常需要引用一些静态资源,如图片、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 更改引用的静态资源的路径。

  1. 首先,在 index.html 中,你需要使用 @@ 符号表示你要更新的文件路径。例如:

注意:如果你的文件路径不包含 @@ 符号,则该路径将被视为绝对路径,并且不会更新,所以一定要将资源路径用 @@ 包裹起来。

  1. 接下来,在命令行里输入以下命令:

这个命令的意思是,修改 index.html 文件中引用的静态资源的路径,并将更新后的文件输出到 /dist 目录中。

  1. 完成上述步骤后,你会发现 /dist 目录中的 index.html 中的资源路径已被更新为以下方式:

如你所见,在每个文件名后面加上了哈希值(如 .93e94525.9b31f301),这样浏览器可以根据哈希值来判断是否需要更新缓存。同时,文件路径也被更新为绝对路径,这样可以避免路径错误问题的发生。

高级使用

如果你使用 swg-rev-path 进行深度优化,并且需要根据不同的环境进行不同的更新,则你可以指定多个环境并使用 -c 参数指定配置文件。

  1. 创建一个 rev-path.config.js 文件,配置如下所示:
-- -------------------- ---- -------
-------------- - -
  -------- -
    ---- -
      ----- -------------
      ----- -------
    -
  --
  --- -
    ---- -
      ----- -------------
      ----- ----------
    --
    ------- -
      ---- -----------
      ------- ------------- ----------
    -
  --
  -------- -
    ---- -
      ----- -------------
      ----- ---------------
    --
    ------- -
      ------- ----
    --
    ---- -
      -------- --------- ----------
    -
  -
-

在上述示例配置文件中,我们配置了三个环境:

  • default 为默认环境,设置了文件 index.html 的路径,默认更新所有引用的资源路径。
  • qa 环境,设置了文件 index.html 的路径为 /qa/dist。同时,将所有 .css 后缀文件修改为 .min.css,同时排除 img/*.svgjs/*.js 文件不做修改。
  • staging 环境,设置了文件 index.html 的路径为 /staging/dist。同时,将所有文件前缀修改为 s_。并且只更新 .cssjs/*.js 文件。
  1. 接下来,在命令行里输入以下命令,就可以根据你的环境名轻松切换不同环境的配置:

这个命令的意思是,使用 rev-path.config.js 文件中 qa 环境的配置文件,更新文件 index.html 中应用的所有资源路径,并将更新后的文件输出到 /qa/dist 目录中。

总结

使用 swg-rev-path 包,可以轻松地重命名静态资源文件名,并更新引用文件的文件路径,以便于实现 cache-busting。配置文件的使用,可以实现高级的操作,多个环境间互相独立,实现高效的开发、测试和发布。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600559e281e8991b448d7783

纠错
反馈