使用patch-package 为依赖包打补丁

868 阅读2分钟

💡Tips: 此操作解决当你本地修改依赖包的源码后,只在本地生效, 而其他人无法同步的问题!!

patch-package 介绍

patch-package npm地址
patch-package github文档

使用流程:

  1. 安装
npm i patch-package -s
  1. 修改项目根目录下的 package.json 文件
// 在scripts下添加 "postinstall": "patch-package" 
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint""postinstall": "patch-package" // 新增!
  },
  1. 手动修改 node_modules 依赖包中的源码
  2. 手动执行命令创建 npx patch-package xxx 补丁文件 (若有多层modules嵌套请看下面注意事项①)
 执行`npx patch-package xxx`(xxx是你要更改的插件依赖包名称)
 
 // 后若没有检测到文件改动,请检查文件路径是否正确(注意事项①)
 // 若有改动则会自动在根目录下创建一个patches文件夹,里面会添加一个xxx+version.patch文件
 // 在xxx+version.patch可以看到改动的代码

  1. 测试补丁是否生效

    a. 删除node_modules文件,重新执行npm install,检查源码若已经替换则补丁生效

    b. 或对更改的依赖包单个卸载重装,重装后需手动执行 npm run postinstall (注意事项②)

注意事项:

  1. 支持修改依赖包中依赖包内容,例如:node_modules/package/node_modules/iveiew,通过“/”分割
// 正确示例
npx patch-package package/iveiew
  1. 对单个依赖卸载重装时要注意重装后的版本号和之前是否一致,若不一致需要重新修改源码提交,执行上面的流程

工作流程:

此插件工作流程就是先检测到你的源码改动,将改动过得源码保存至patches文件夹内,提交到git后,其他人拉项目重新install,会自动执行package.json中的postinstall钩子,将patches文件夹内改动的内容对源码进行覆盖替换

文章借鉴: blog.csdn.net/weixin_4509…