Vue修改node_modules中的第三方插件代码（后续npm install依旧保留该修改）

需求：有时在开发过程中，如果node_modules 中我们使用的第三方插件有bug （作者又没有提供相应的API供我们扩展修改，提了issue也没人管）或者本身不满足我们的地方， 我们需要更改node_modules 依赖包中的源码时，为了不更改后，别人或者自己重新 npm install 时， 导致我们的更改丢失，我们需要用到patch-package。（魔改的同时，也局限了升级的能力，尽量还是去提issue）

1.通过命令安装 patch-package

npm install patch-package

2.修改项目根目录下的 package.json 文件

   在 package.json 文件中的 scripts 中加入 "postinstall": "patch-package"

 3.手动修改 node_modules 依赖包中的源码

例如：修改的是node_modules中vue-currency-input文件夹中的index.cjs文件源码

4.手动执行命令创建 npx patch-package package-name，package-name就是node_modules中的根文件夹名，你修改的依赖包的名字

例如：修改的是vue-currency-input文件夹中以内的文件

执行命令 npx patch-package vue-currency-input

5.执行完第4步的命令后，项目根目录中会自动创建一个 patches 文件夹，patches 文件夹里面就是新增的补丁文件。

注意：

a、每次修改不同的依赖包，每次都要执行npx patch-package package-name；

b、patch是锁定版本号的，如果升级了版本，patch内容将会失效，最好在package.json能够锁定版本号。

补丁文件中会像git一样显示补丁修改的具体点，如下图：

6、本地重新运行就可以生效了。

问题答疑：

1、补丁文件失效？

首先不管是npm,yarn或者pnpm下，都需要对要打补丁的依赖版本固定，如果后续团队中的其他成员依赖版本不一致，那么补丁不会生效的噢~

2、vite框架下都按照上述步骤来做了，但是为啥重启后没有生效？

首先vite为啥那么快的原因之一是 node_modules下的.vite文件会把加载的依赖做一个缓存的（vite预构建），你修改补丁后，照常 yarn dev 或者 npm run dev 重启的话，这个.vite 缓存还是存在的，所以你会发现页面并没有什么变化，这个时候，你可以 yarn dev --force重启，意思就是不使用缓存，重新构建依赖，或者删除.vite文件，再重新启动。但是实际上 ，一个yarn dev --force足够了

3、打了补丁后，我不想要这个补丁了，怎么办？

这个时候如果你删除patches文件夹，再重启的话，其实是没有效果的，patches文件只会记录你修改了依赖的哪些东西，原因是 npx patch-package 已经将依赖代码修改了，所以你想要恢复的话，只有将之前的依赖源码还原回去，然后再 npx patch-package package-name(package-name为依赖名，可为路径名)，这个时候重启，就会发现之前的源码又回来了

 4、项目本地运行生效了，但线上部署的时候该补丁文件未生效怎么办？

首先我们可以看下线上部署构建时是否成功安装patsh-package，它应该是报错了，并提示：cannot run in wd XXXXXXXXXXX patch-package

 原因分析：

npm 出于安全考虑不支持以 root 用户运行，即使你用 root 用户身份运行了，npm 会自动转成一个叫 nobody 的用户来运行，而这个用户几乎没有任何权限。这样的话如果脚本里有一些需要权限的操作，比如写文件（执行install 的时候 patch-package 会往第三方库写代码）就会崩掉

解决办法如下：

第一种办法：执行npm install命令时加上--unsafe-perm选项：

npm install --unsafe-perm

第二种办法：将unsafe-perm选项添加到项目的package.json文件中：

"config": {
    "unsafe-perm":true
}