在开发过程中呢，小伙伴们，应该都会遇到这种问题，组件库中的某些组件满足不了我们的需求，我们可以根据自己的需求去改变官方组件库，但是问题来咯，我们的代码是需要提交到远程仓库，而node_modules我们是不提交到的远程仓库的。所以这里有三种方法：

第一种：（vue项目如何修改第三方依赖包）

Step1: 安装

// 使用npm安装
npm i patch-package

// 使用yarn安装
yarn add patch-package postinstall-postinstall

Step2：修改package.json

package.json的scripts中声明了一系列的npm脚本命令，如下：（参考资料：npm-scripts）

• prepublish: 在包发布之前运行，也会在npm install安装到本地时运行
• publish,postpublish: 包被发布之后运行
• preinstall: 包被安装前运行
• install,postinstall: 包被安装后运行
• preuninstall,uninstall: 包被卸载前运行
• postuninstall: 包被卸载后运行
• preversion: bump包版本前运行
• postversion: bump包版本后运行
• pretest,test,posttest: 通过npm test命令运行
• prestop,stop,poststop: 通过npm stop命令运行
• prestart,start,poststart: 通过npm start命令运行
• prerestart,restart,postrestart: 通过npm restart运行

可以看到依赖包在安装完之后会执行postinstall命令：

所以我们在package.json的scripts里面增加："postinstall": "patch-package"

"scripts": {
    ***,
+   "postinstall": "patch-package"
}

Step3：修改依赖包源码

在项目的node_modules 找到要修改的依赖包，进行修改；

Step4: 生成补丁

yarn patch-package package-name(修改的包名)
或者
npx patch-package package-name（npm版本 > 5.2）

patch-package 6.4.7
• Creating temporary folder
• Installing resize-observer-polyfill@1.5.1 with yarn
• Diffing your files with clean files
✔ Created file patches/resize-observer-polyfill+1.5.1.patch

💡 resize-observer-polyfill is on GitHub! To draft an issue based on your patch run

    yarn patch-package resize-observer-polyfill --create-issue

可以看到patch-package已经为我们创建了一个补丁。

默认会在我们的根目录下创建一个patches文件夹。在patches文件夹下会创建依赖包名+版本号.patch的文件，文件描述了我们修改了什么，第几行，有点像git的提交记录

Step5: 测试补丁是否有效

手动删除node_modules文件夹，重新执行npm install安装依赖包。可以看到在依赖包安装结束后执行了patch-package命令，之前生成的补丁被应用了。

patch-package 6.4.7
Applying patches...
resize-observer-polyfill@1.5.1 ✔
Done in 177.35s.

最后将patches文件夹推送到远端仓库，日后无论是谁拉取代码，安装依赖，我们之前修改的部分都会生效的。

注意事项

• patch是锁定版本号的，如果升级了版本，patch内容将会失效，最好在package.json能够锁定版本号。

• 魔改的同时，也局限了升级的能力，尽量还是去提issue和PR。

第二种：（uni-app项目中如何修改第三方依赖包）

1、安装patch-package

patch-package 官方只支持 npm 和 yarn。注意：不要使用cnpm

yarn add patch-package -D

2、创建补丁

先修改依赖文件，然后运行patch-package来创建patch文件了。我这里用element-ui来举例子

yarn patch-package element-ui

3、修改package.json文件

"scripts": {
    // 新增
    "postinstall": "patch-package"
}

4、 测试补丁是否生效

• 删除 node_modules 文件夹
• 重新安装依赖：yarn install
• 查看自己修改的文件是否还在。如果之前修改的文件还在，则表明补丁文件已经生效。

5、使用范围
如果提示如下，则表示不支持该包管理器。patch-package 官方只支持 npm 和 yarn

**ERROR** No package-lock.json, npm-shrinkwrap.json, or yarn.lock file. You must use either npm@>=5, yarn, or npm-shrinkwrap to manage this project's dependencies.

6、注意

patch是锁定版本号的，如果升级了版本，patch内容将会失效。可以在package.json锁定版本号。

但是：对于以上第二种方法，其实都不太建议使用以上两种方法，因为对于后期的维护，很不方便的，如果人家组件库有更新的话，那么我们更新起来岂不是很麻烦的，所以建议他们将组件库的组件拿出来作为自己的全局组件使用。