使用“黑魔法”优雅的修改第三方依赖包

见贤思齐

背景Vue项目中使用的element-ui，由于弹窗里表单项太多，一些表单项会在可视范围之外。校验表单时，如果未通过校验的表单项在可视范围外，用户感知不强。所以需要在表单校验未通过时滚动到第一个未通过校验的表单项那里，翻看element-ui文档，发现未提供该API。起初想到的方案有两种：在业务中封装函数，表单校验失败时调用该函数，根据表单校验失败的className，获取第一个校验失败的dom元素，滚动到指定的dom元素位置。但是如果页面存在多个form表单需要做区分，会增加我们的一个工作量，并且不够优雅。修改element-ui的源码，增加一个API。但是在平台编译时如果重新执行npminstall时代码会被覆盖，并且团队协作时也会遇到这个问题，团队开发中有诸多不便。后面经过一顿搜索后，发现一个“黑魔法”的解决方案。并且该方案上手简单、便携、且一劳永逸。黑魔法之patch-packagepatch-package先看看官方是怎么介绍的patch-packageletsappauthorsinstantlymakeandkeepfixestonpmdependencies.It'savitalband-aidforthoseofuslivingonthebleedingedge.Patchescreatedbypatch-packageareautomaticallyandgracefullyappliedwhenyouusenpm(>=5)oryarn.Nomorewaitingaroundforpullrequeststobemergedandpublished.Nomoreforkingreposjusttofixthatonetinythingpreventingyourappfromworking.总而言之，patch-package给开发者提供了通过打“补丁”的方式，使得重新安装依赖包时能够保留之前对第三方依赖包的修改的一种解决方案。patch-package的应用场景想想我们在使用第三方依赖包时如果遇到了bug，通常解决的方式都是绕过这个问题，使用其他方式解决，较为麻烦。或者给作者提个issue或者PR，然后等待作者的修复。等待的时间不可控，如果你不想天天被产品、测试后面追着，是不是就可以借助patch-package自己动手去修复该bug，感觉是不是很棒。并且还可以在第三方依赖包上，根据业务需求扩展能力。Tip：最好还是扩展一些通用性比较高的能力，如果是比较通用且该能力大多数开发者都有这种诉求的话可以给第三方依赖包提个PR。参与开源项目是不是简单了起来了～（不要在魔改的路上越走越远！！！）patch-package的使用Step1：安装使用npm安装npm i patch-package使用yarn安装yarn add patch-package postinstall-postinstall为什么要使用yarn安装需要多安装postinstall-postinstall这个依赖，有兴趣可以看官方解释。Whyusepostinstall-postinstallStep2：修改package.json文件package.json的scripts中声明了一系列的npm脚本命令，如下：（参考资料：http://caibaojian.com/npm/misc/scripts.html）prepublish:在包发布之前运行，也会在npminstall安装到本地时运行publish,postpublish:包被发布之后运行preinstall:包被安装前运行install,postinstall:包被安装后运行preuninstall,uninstall:包被卸载前运行postuninstall:包被卸载后运行preversion:bump包版本前运行postversion:bump包版本后运行pretest,test,posttest:通过npmtest命令运行prestop,stop,poststop:通过npmstop命令运行prestart,start,poststart:通过npmstart命令运行prerestart,restart,postrestart:通过npmrestart运行可以看到依赖包在安装完之后会执行postinstall命令所以我们在package.json的scripts里面增加："postinstall":"patch-package""scripts": {    ***,+   "postinstall": "patch-package"}Step3：修改依赖包源码以element-ui为例：image-20210913202847229我们在element-ui的Button组件上加一个类名button看看image-20210913203142458通过控制台查看我们的修改已经生效Step4：生成补丁yarn patch-package package-name(修改的包名)或者npx patch-package package-name（npm版本 > 5.2）这里我们执行npxpatch-packageelement-ui命令看看feiyu@feiyudeMacBook-Pro demo % npx patch-package element-uipatch-package 6.4.7patch-package: you have both yarn.lock and package-lock.jsonDefaulting to using npmYou can override this setting by passing --use-yarn or deletingpackage-lock.json if you don't need it• Creating temporary folder• Installing element-ui@2.15.6 with npm• Diffing your files with clean files✔ Created file patches/element-ui+2.15.6.patch💡 element-ui is on GitHub! To draft an issue based on your patch run    npx patch-package element-ui --create-issue可以看到patch-package已经为我们创建了一个补丁。默认会在我们的根目录下创建一个patches文件夹。在patches文件夹下会创建依赖包名+版本号.patch的文件，文件描述了我们修改了什么，第几行，有点像git的提交记录。image-20210913203711120Step5：测试补丁是否有效手动删除node_modules文件夹，重新执行npminstall安装依赖包。可以看到在依赖包安装结束后执行了patch-package命令，之前生成的补丁被应用了。> patch-packagepatch-package 6.4.7Applying patches...element-ui@2.15.6 ✔查看node-modules中之前修改的element-ui修改的地方，查看之前修改的代码是否还存在。如果之前修改的代码还存在，说明补丁文件已经生效了，如果不存在，排查下是否哪个步骤出现了问题。最后将patches文件夹推送到远端仓库，日后无论是谁拉取代码，安装依赖，我们之前修改的部分都会生效的注意事项patch是锁定版本号的，如果升级了版本，patch内容将会失效，最好在package.json能够锁定版本号。魔改的同时，也局限了升级的能力，尽量还是去提issue和PR。最后patch-package还提供了一些额外的参数，有兴趣的话可以查看官方文档。参考资料patch-package-官方：https://github.com/ds300/patch-packagenpm-scripts文档：http://caibaojian.com/npm/misc/scripts.htmlWhyusepostinstall-postinstall：https://github.com/ds300/patch-package#why-use-postinstall-postinstall-with-yarn-END-