一、背景
有些组件不满足业务时咱们只能修改插件的源码:
- 直接在项目的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包后执行用修改后文件覆盖原始文件逻辑。
三、引用自定义包 (引用法)文章来源:https://www.toymoban.com/news/detail-487807.html
另外一种是直接将自定义模块放在node_modules外面的另一个目录中,并将其作为文件引用添加到package.json 使用时要把package-lock.json文件删除再npm install 安装依赖。文章来源地址https://www.toymoban.com/news/detail-487807.html
"dependencies": {
"yu-element-ui": "file:yu-element-ui"
}
到了这里,关于node_modules插件代码修改,如何快速修改防止npm install安装覆盖代码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!