首页 前端知识 Vue修改node_modules中的第三方插件代码(后续npm install依旧保留该修改)

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

2024-10-29 23:10:21 前端知识 前端哥 456 604 我要收藏

需求:有时在开发过程中,如果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
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19559.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!