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"
https://i-blog.csdnimg.cn/blog_migrate/17ebb73e466e9ca3a73b2c1761be316e.png
3.手动修改 node_modules 依赖包中的源码
例如：修改的是node_modules中vue-currency-input文件夹中的index.cjs文件源码
https://i-blog.csdnimg.cn/blog_migrate/555b8273aad4abe673733d3c8792339c.png
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可以或许锁定版本号。
https://i-blog.csdnimg.cn/blog_migrate/2a13ea1ab0060144141343b040544f7e.png
补丁文件中会像git一样显示补丁修改的具体点，如下图：
https://i-blog.csdnimg.cn/blog_migrate/786f05c8b230269d7eb3c1f5d03e82b5.png
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
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]