简介
在前端开发中，文件版本管理是非常重要的一环。当我们更新了某个文件时，需要确保该文件名的变更可以正确地被缓存，并不影响到之前已经缓存的文件。
hash-dir 是一个基于 Node.js 的 npm 包，它可以帮助我们为指定的目录生成带有唯一 hash 值的文件夹名称，从而实现静态资源的强缓存。本文将介绍如何使用 hash-dir 在前端项目中实现版本控制。
安装
在安装 hash-dir 前，你需要先确保你的计算机已经安装了 Node.js 和 npm。如果你还没有安装，请先从 Node.js 官网下载并安装最新版。
安装 hash-dir 只需运行以下命令：
npm install hash-dir --save-dev
使用
1. 初始化
你可以通过以下代码初始化 hash-dir：
const hashDir = require('hash-dir');
const path = require('path');
const dirPath = path.join(__dirname, 'public');
const hashedDirPath = hashDir(dirPath);
console.log(hashedDirPath); // 输出类似 /Users/user/project/public_9d2e4266c20f3cb797a68b7d30ec96fa 的路径以上代码中，我们首先引入了 hash-dir 和 path 模块，然后指定了要进行版本控制的目录，最后调用 hashDir 方法生成带有 hash 值的新目录名称。
2. 修改文件引用路径
在生成了新的版本号之后，我们需要将 HTML 文件中原来引用旧版本的静态资源路径修改为新版本的路径。以下是一个例子：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-----------------------
----- ---------------- ---------------------------- --
-------
------
------- ---------------------------------
-------
-------假设我们已经通过 hash-dir 工具生成了新的版本号路径 /Users/user/project/public_9d2e4266c20f3cb797a68b7d30ec96fa，我们需要将上面 HTML 文件中的 href 和 src 属性值中的 /public/ 替换成新的路径。
你可以使用以下代码完成路径替换：
-- -------------------- ---- -------
----- ------------- - -----------
----- ------------- - ------------- - ----
----- ---------- - -
--------- -----
----- ----------
------
----- --------------- --
-----------------------
----- ---------------- ---------------------------- --
-------
------
------- ---------------------------------
-------
-------
--
----- ------------- - ---------------------- --------------------- ----- ---------------
--------------------------- -- -------- ---- ---3. 自动化构建
如果你的前端项目使用了自动化构建工具，如 webpack，那么你可以在构建过程中使用 hash-dir 工具。以下是一个 webpack 配置文件的例子：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - --------------------
----- ------- - -------------------- ----------
----- ------------- - -----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- ------- ---------------
--
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--以上代码中，我们通过 hashDir 方法生成了新的版本号目录，并将其作为构建输出路径。当我们每次修改文件并重新构建时，webpack 会自动生成新的带有 hash 值
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43777