前端源码库修补方案——快速弥补依赖缺陷在日常的研发工作中如果依赖库源码存在缺陷或者想立即增添相关的特殊需求,要解决此类问
在日常的研发工作中如果依赖库源码存在缺陷或者想立即增添相关的特殊需求,要解决此类问题可能会想到以下几个解决思路
解决思路
-
(一)通过github 找到依赖库提交issue或者需求,供研发团队评估->发布新版->重新下载新版本依赖->解决问题;
-
(二)通过github 拉取一个fork独立分支,自行解决,本地项目调整依赖库地址;
-
(三)补丁方案:不影响依赖库主项目,本地项目依赖不变,通过打补丁的方式,依赖安装完成后会自动化进行缺陷修补;
优缺分析
-
(一)需要等待依赖库研发团队进行排期,可能存在不能及时响应本地项目交付的时间节点,时间不受控;
-
(二)fork独立分支将会与依赖库完全独立,后期依赖库升级的功能将不能使用,版本处于停留;
-
(三)可以阶段性的快速弥补该版本缺陷,后期版本升级也可以继续使用;
实践案例
我结合自己实际项目的场景,重点介绍第三种解决方案,顺利平滑过度,满足新的业务需求。
源码级补丁修复主要使用了以下几个辅助库:
-
patch-package 补丁库 github.com/ds300/patch…
-
uglify-js JS压缩库 github.com/mishoo/Ugli…
步骤
第一步
/**安装依赖**/
npm i patch-package
第二步
/**package.json文件 脚本处添加npm i 安装后的执行回调**/
"scripts": {
"postinstall": "patch-package"
}
第三步
/*依赖库源码修改*/
xxxxx自行修改
第四步
/**npm工具包命令对依赖源码进行补丁生成**/
npx patch-package package-name
/**执行成功后,会在项目目录顶级生成patches目录,里面会有补丁文件的信息**/
|——demo
|————node_modules
|————patches
|————src
|————packages.json
备注
如果是pnpm进行的多包管理,执行npx patch-package package-name会报错,可以通过如下策略完成
(1)删除node_modules
(2)接着在项目中单独进行npm i 进行依赖包安装;
(3)再项目中执行 npx patch-package package-name
(4)补丁生成好后,把本项目的node_modules 再次删除;
(5)最后执行pnpm i,完成整个补丁需改;
最后
本文有一个工具uglify-js还没介绍,如果你想对修改补丁源码进行压缩混淆,可以通过这个工具来实现
uglifyjs js/update.file.js -o update.file.min.js
转载自:https://juejin.cn/post/7424404476892594186