如何使用importmap改造项目build后的hash

1、遇到的问题

在vue3项目开发中，遇到一个问题，就是项目打包用的vite，但是vite每次打包的hash不支持contentHash,导致每次上线的时候，没有改动过的文件的hash值都会重新变一次，导致缓存失效，那有没有办法来实现contentHash的功能呢，那就要来说今天的主角:** importmap;**

2、importmap是什么？

下面这个是mdn里对它的解释 (developer.mozilla.org/zh-CN/docs/…)； 简而言之，importmap就是可以通过一个映射文件重定向import的文件，通过importmap我们可以将文件的hash变更维护在importmap中，而不是在源代码中；

3、如何实现

把之前编译后的文件改为无hash的，在编译完后通过node根据文件内容重新计算hash,并重命名文件，在此过程中记录无hash的js和有hash的js的对应关系，生成一个映射关系，用临时文件存储；

4、如何处理sourcemap

因为修复了文件名，原始生成的js中的sourcemap的文件名就是错误的，但是sourcemap最后一行代码是一条注释，指示浏览器或调试工具 sourcemap 文件的位置。这条注释一般形式如下： //# sourceMappingURL=.map 所有这个代码的修改并不影响sourcemap还原代码，那么就可以把文件中的//# sourceMappingURL 替换成重新计算的hash即可；

未完待续；