node_modules插件代码修改，如何快速修改防止npm install安装覆盖代码

一、背景

有些组件不满足业务时咱们只能修改插件的源码：

1. 直接在项目的node_modules下找到插件的源码直接修改；
   • 优点：简单直接、快速见效；
   • 缺点：不能持久化，一旦重新npm install安装就失效；不方便团队成员使用修改后的代码；
2. 去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包后执行用修改后文件覆盖原始文件逻辑。

三、引用自定义包 （引用法）

另外一种是直接将自定义模块放在node_modules外面的另一个目录中，并将其作为文件引用添加到package.json 使用时要把package-lock.json文件删除再npm install 安装依赖。

"dependencies": {
   "yu-element-ui": "file:yu-element-ui"
 }