526互联

解决 heatmap.js 'Cannot assign to read only property 'data' of object' 问题与 patch-package 使用方法

发布时间 2023-08-03 09:28:12作者: iNSlog

一、问题背景

问题是这样发生的，因为项目中需要实现热力图的功能，所以使用了第三方的库 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

解决方法

  1. 安装 patch-package
npm i patch-package
# or
yarn add patch-package
  1. 修改 package.json
"scripts": {
+ "postinstall": "patch-package"
}
  1. 修改 node_modules 中的代码
  2. 在每次修改依赖中的代码后执行这个命令：yarn patch-package 依赖包名

之后会在根目录下自动生成一个名为 patches 的目录，这里保存着修改的记录。