故事起因
在一个安静祥和的下午,我刚冲了一杯现的冰美式,刷着论坛。同桌同事着急忙慌的拍我的桌子说:“你项目有bug,用户无法发布动态了,你赶紧看看。”
我猛的打起10分精神说到:“刚刚不是你改了发版吗,改到大动脉了?我看看”
同事:“没有啊我就改了一个css,你之前就有bug”
内心:闭嘴沙雕
问题排查
这是一个新开小程序社区项目,因为需要兼容h5端的帖子经过调研,选择了三方富文本插件来打通两端的帖子、动态内容#【记一记】h5移动端和小程序富文本渲染和富文本解决方案mp-html组件使用记录
一图为正常情况,二图明显这个可编辑富文本组件直接没了。
妖孽我一眼就看出你(wen)不(ti)是(yuan)人(yin)
问题定位
问题就在于这个富文本插件功能,聪明的作者就让开发者自己来diy这个库。简单来说你直接用那么他就只做一个功能那就是帮你渲染html结构字符串,也就是相当于一个v-html
的功能,这样可以保证这个库打包出来的代码体积最小。需要使用富文本编辑器功能的话就需要修改node_modules
中的代码,然后重新执行build
,那么才会把富文本编辑器功能打包进去。
同事的操作:git clone
-> 修改代码 -> 打包发版。因为忽略了上面那一步导致富文本编辑器代码没有在打包文件里面所以导致了无法使用此功能。找到问题那么我们就开始解决问题。
解决问题
首先保证正式环境没问题,赶紧打个包提审再来细品如何解决这个问题
思考:如何能让我本地修改的node_modules
,在别人那儿也生效呢而且不需要每一次yarn
或者新增依赖后都单独去修改node_modules
。参考中patch-package
github地址方案# 如何修改 node_modules 里的文件
以上是官方文档的描述下面咱们开始使用
第一步:终端运行yarn add patch-package postinstall-postinstall --dev
第二步:package.json
中增加"postinstall": "patch-package"
第三步:在node_modules
修改对应库的代码。
第四步:终端运行 yarn patch-package xxx(package-name)
搞定