🛠 解决 heatmap.js 'Cannot assign to read only property 'data' of object' 问题与 patch-package 使用方法
一、问题背景
问题是这样发生的，因为项目中需要实现热力图的功能，所以使用了第三方的库 heatmap.js。
但是在一些浏览器中使用它时，会出现这个错误：
> Uncaught TypeError: Cannot assign to read only property 'data' of object '#<ImageData>'
出现问题的原因是因为 img.data = imgData; 这行代码，其目的是直接替换 img 的 data 属性。但是 data 属性在一些浏览器中是只读的，如果想要修复这个问题需要删除这一行代码。因为 imgData 与 img.data 指向相同的引用，对 imgData 的所有修改都会体现在 img.data 中。
二、问题解决思路与方法
🗑删除 heatmap.js 中 527 行的代码。
需要修改的代码在 node_modules 下面，但是在 node_modules 这里修改会有一下两个问题：
- 更新问题。重新安装之后，修改的文件会被覆盖；
- 同步问题。node_modules 里的文件肯定时不会提交到代码库中的，那如何让团队其他成员也能同步更新呢？你总不能每次改完之后都手动发给其他人吧。
💡 我想到的解决方法：
- fork 代码到自己仓库进行修改，然后可以发布成一个包再安装它。
- 将代码放入 src 目录下，修改后引入使用。
但是为了修改一行代码，我要复制整个项目多少有点难受，要知道修改了哪里，而且还不能与作者同步更新。
所以我需要另外一个解决方法：patch-package
🛠 解决方法
npm i patch-package
# or
yarn add patch-package
- 修改 package.json
"scripts": {
+ "postinstall": "patch-package"
}
- 修改 node_modules 中的代码
- 在每次修改依赖中的代码后执行这个命令：
yarn patch-package 依赖包名
之后会在根目录下自动生成一个名为 patches 的目录，这里保存着修改的记录。
❧
