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}