介绍
在前端开发中，我们经常会使用到 hash 值来实现路由跳转、资源加载等功能。但是我们在生产环境中打包的代码通常是被压缩的，这会导致 hash 值变得很长，难以记忆和调试。此时，我们可以使用 unhash 来解决这个问题。
unhash 是一个命令行工具，它可以将 hash 值还原为对应资源的原始文件名。这非常有用，因为在打包后，JavaScript 和 CSS 文件的名称通常会被压缩和混淆，不容易直接在浏览器中访问。
安装
你可以使用 npm 全局安装 unhash。
npm install -g unhash
使用
- 在你的项目的根目录中执行以下命令：
unhash --src build --out unbundled
其中，--src 指定被还原文件的目录或文件（在这里指的是打包后的文件夹或文件），--out 指定还原后的文件输出目录或文件（在这里指的是你自己设置的一个目录或文件名）。
- 执行命令后，unhash 会遍历目录中的所有文件，并将原始文件名添加到文件名中，例如：
build/app.b969d1f9.js
会被重命名为：
unbundled/app.b969d1f9-main.js
- 重命名后的文件就可以直接在浏览器中访问了，你可以将它们上传到你的服务器上，并使用相应的路径在你的 HTML 文件中引用。
示例代码
下面是一个简单的示例，展示如何使用 unhash 来还原文件名。
打包前
-- -------------------- ---- ------- - --------- ---- --- --- - --- ------ - --- ------ --- ---- - --- -------- - --- --------- --- ---------- --- -----------
打包后
-- -------------------- ---- ------- - --------------- ------ --- --- - --- --------------- - --- --------------- --- ---- - --- ----------------- - --- ------------------ --- ---------- --- -----------
命令行
unhash --src build --out unbundled
处理后
-- -------------------- ---- ------- - ------------------- ---------- --- --- - --- ------------------- - --- ------------------- --- ---- - --- ---------------------- - --- ------------------------ --- ---------- --- -----------
HTML 中的引用
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- ---------------- ----------------------------------------------
----- ---------------- ------------------------------------------------
--------- -----------
-------
------
------- --------------------------------------------------
------- --------------------------------------------------
-------
-------结论
unhash 是一个非常有用的工具，可以帮助我们在生产环境中更方便地调试和排查问题。它可以轻松地将 hash 值还原为对应资源的原始文件名。虽然它不太可能成为你日常工作的主要工具，但是它对于一些复杂的项目或需要快速调试问题的场景下非常有价值。在你的下一个项目中，不妨试试 unhash 来简化你的工作流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005517981e8991b448cec99