前言
在前端开发中,通常需要引用一些静态资源,如图片、CSS、JS 文件等。在我们的代码中,我们通常会填写如下路径:
<img src="img/logo.svg" alt="Logo"> <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>
但如果你的网站或应用程序需要使用 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
:
npm install -g swg-rev-path
使用 swg-rev-path
以 index.html
文件为例,这篇文章演示如何使用 swg-rev-path
更改引用的静态资源的路径。
- 首先,在
index.html
中,你需要使用@@
符号表示你要更新的文件路径。例如:
<link rel="stylesheet" href="@@/css/style.css"> <img src="@@/img/logo.svg" alt="Logo"> <script src="@@/js/script.js"></script>
注意:如果你的文件路径不包含
@@
符号,则该路径将被视为绝对路径,并且不会更新,所以一定要将资源路径用@@
包裹起来。
- 接下来,在命令行里输入以下命令:
swg-rev-path -f index.html -d /dist
这个命令的意思是,修改 index.html
文件中引用的静态资源的路径,并将更新后的文件输出到 /dist
目录中。
- 完成上述步骤后,你会发现
/dist
目录中的index.html
中的资源路径已被更新为以下方式:
<link rel="stylesheet" href="/css/style.93e94525.css"> <img src="/img/logo.9b31f301.svg" alt="Logo"> <script src="/js/script.62f2c7a1.js"></script>
如你所见,在每个文件名后面加上了哈希值(如 .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
文件。
- 接下来,在命令行里输入以下命令,就可以根据你的环境名轻松切换不同环境的配置:
swg-rev-path -c rev-path.config.js -e qa
这个命令的意思是,使用 rev-path.config.js
文件中 qa
环境的配置文件,更新文件 index.html
中应用的所有资源路径,并将更新后的文件输出到 /qa/dist
目录中。
总结
使用 swg-rev-path
包,可以轻松地重命名静态资源文件名,并更新引用文件的文件路径,以便于实现 cache-busting。配置文件的使用,可以实现高级的操作,多个环境间互相独立,实现高效的开发、测试和发布。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600559e281e8991b448d7783