在前端开发过程中，我们经常需要为静态资源（如 CSS、JavaScript、图片等）添加 hash 值，以便于用户在访问网站时能够及时更新缓存。而 broccoli-asset-rev 就是一个能够自动帮助我们添加 hash 值的 npm 包。
安装
在安装 broccoli-asset-rev 时，我们需要先在项目目录下安装 Node.js，然后使用 npm 安装 broccoli-asset-rev：
npm install --save-dev broccoli-asset-rev
使用
使用 broccoli-asset-rev 需要创建一个 broccoli 插件来处理静态资源。首先，在项目目录下创建一个名为 Brocfile.js 的文件，然后在其中引入 broccoli-asset-rev：
let assetRev = require('broccoli-asset-rev');接着，在 Brocfile.js 中创建一个静态资源源目录的节点，并将其传递给 broccoli-asset-rev：
-- -------------------- ---- ------- --- -------- - ---------------- --- --------- - --- ---------------- - ----------- ------- ------- --- --- ---------- - ------------------- - ----------- ------ ------ ------ ------- ------------------ -------- ------ ------ ---
其中，assetNode 是一个基于 broccoli 对象创建的节点，而 revvedNode 则是通过 assetRev() 函数生成的节点。在参数中，我们可以指定需要添加 hash 值的文件类型及该 hash 值要替换的文件类型。例如，上述代码中，我们指定了需要为 js、css、png、jpg 类型的文件添加 hash 值，并将 hash 值替换到 html、hbs、php 文件中。
最后，我们可以将 revvedNode 作为 broccoli 树的根节点，并通过 broccoli 生成器生成静态资源。例如，下面是一个基于 broccoli 的插件辅助生成器的例子：
-- -------------------- ---- -------
--- -------- - --------------------
--- ---------- - -----------
-------------- - ---------- -
------ --- ----------------- ------- -- -
--- ------- - --- -----------------------------
---------------
-------- -- --------------------
------------ -- ------------
----------- -- -------------------
---
--示例
假设我们有如下的项目目录结构：
-- -------------------- ---- ------- --- ------ - --- ------ - --- ---------- - --- ------ - --- ---------- - --- -------- - --- ----------- --- ----------- --- ------------ --- -------------
其中，public/assets 目录中包含了 index.html、app.js、styles.css 和 logo.png 四个文件。我们想要为这四个文件添加 hash 值并更新缓存，那么就可以使用 broccoli-asset-rev。
首先，在项目目录下运行 npm install --save-dev broccoli-asset-rev 命令安装 broccoli-asset-rev 包。然后，在 Brocfile.js 文件中引入并配置 broccoli-asset-rev：
-- -------------------- ---- ------- --- -------- - ------------------------------ --- ------ - --------------------------- --- -------- - ---------------- --- --------- - --- ---------------- - ----------- ------- ------- --- --- ---------- - ------------------- - ----------- ------ ------ ------ ------- ------------------ -------- ------ ------ --- -------------- - -----------
在代码中，我们使用了 broccoli-funnel 来创建了一个名为 assetNode 的节点，表示拷贝 public/assets 目录下的所有静态资源。然后，我们将 assetNode 传递给了 assetRev() 函数，并通过参数设置了需要添加 hash 值的文件类型和要替换的文件类型。最后，我们将 assetRev() 函数生成的节点直接作为 Brocfile.js 文件的输出。
在 Brocfile.js 文件配置完毕后，我们可以使用下面的 broccoli.js 文件运行 broccoli 构建器生成静态资源：
-- -------------------- ---- -------
--- -------- - --------------------
--- ---------- - ----------------------
-------------- - ---------- -
------ --- ----------------- ------- -- -
--- ------- - --- -----------------------------
---------------
-------- -- --------------------
------------ -- ------------
----------- -- -------------------
---
--然后，在命令行中运行 node broccoli.js dist 命令即可将生成的静态资源输出到 dist 目录中。在静态资源目录中，类似于脚本标签中引用的 app.js 文件名就会被更新为 app-xxxxxx.js 的形式，其中 "xxxxxx" 表示生成的随机 hash 值。
指导意义
使用 npm 包 broccoli-asset-rev 可以使我们更方便地为项目中的静态资源添加 hash 值并实现缓存更新。它不仅可以提高前端工作效率，还能为用户提供更快速的网站访问体验。
当然，我们在使用 broccoli-asset-rev 时也需要遵循一定的规则。需要注意的是，在使用该包时需要指定某些文件类型，而其他文件类型（如 html 文件）则需要手动修改文件名和引用，否则无法正确获取缓存。此外，在使用 broccoli-asset-rev 时还需要注意自己的项目目录结构，从而正确引用静态资源。
总之，只要我们仔细遵循规则并善用 broccoli-asset-rev，就可以在前端开发中实现更加自动化、高效的资源管理，更好的提升网站性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60707