如果我们在项目开发中遇到第三方库产生的bug,有时候就需要修改它的源码来解决,又考虑到多人协作开发,这时候patch-package就可以出场了。
本文以element-ui为例
1. 安装插件 在项目根目录下执行
npm intsall patch-package
然后package.json文件会添加以下依赖
2. 添加命令 package.json文件scripts下添加以下命令
3. 修改源码
下载element-ui源码(github.com/ElemeFE/ele…)
- packages文件夹中找到组件源码,进行修改
- 在根目录下执行
npm install - 上一步完成后执行
npm run dist - 此时会生成新的lib文件夹,在lib文件夹中找到对应组件修改编译后的代码
- copy编译后的代码
以table组件为例:
修改packages中源码
打包后lib包中对应代码
4. 更新项目中安装依赖的源码,生成patch文件
- 在node_modules下找到element-ui依赖文件夹
- 找到lib文件下(element-ui引用的是lib文件)我们上一步修改的文件,将copy的代码进行覆盖
- 在项目根目录下执行
npx patch-package element-ui - 会多出patches文件夹,里面会生成patch文件,将此文件提交即可
其他人在更新代码后,通过执行npm install,会将patch文件更新到对应依赖中,如果没更新可执行下npm run postinstall
一个依赖只会生成一个patch文件,如果需要改多处,可先将patch文件应用到自己本地的依赖中,再进行以上步骤修改,以免造成patch冲突