一、背景
有些组件不满足业务时咱们只能修改插件的源码:
- 直接在项目的node_modules下找到插件的源码直接修改;
- 优点:简单直接、快速见效;
- 缺点:不能持久化,一旦重新npm install安装就失效;不方便团队成员使用修改后的代码;
- 去github上fork代码到自己的仓库进行修改,并将自己修改过后的代码发布到npm上使用;
- 优点:团队成员都可以使用到这份修改的代码;
- 缺点:麻烦、十分麻烦;
在网上找了很多解决方案最多的是patch-package 但是我们使用的组件包来源民间大神修改,改动范围广,导致使用这个根本没有用,还产生冲突。所以找到了覆盖组件代码的方法简单粗暴。
二、替换插件包(拷贝覆盖法)
npm install 完成后会执行package.json 文件里的script内的postinstall钩子
。在这个勾子执行cp
修改过的文件 ./node_modules/包名/原始文件
拷贝过去,最终node_modules
下的文件就变成了修改后的文件了,应用在本篇element-ui例子中如下:
在自己的项目中存放修改插件包,如下图:element-ui
最后在package.json文件里加入下图的代码:
其中要加-r 不然只能拷贝文件不能拷贝文件夹 ;源文件最后要加*来移动文件内所有的文件夹以及文件;
"postinstall": "cp -r ./element-ui/* ./node_modules/element-ui"
即在每次install包后执行用修改后文件覆盖原始文件逻辑。