详解如何修改 node_modules 里的文件


Posted in Javascript onMay 22, 2020

前言

有时候使用npm上的包,发现有bug,我们知道如何修改,但是别人可能一时半会没法更新,或者是我们特殊需求,别人不愿意修改,这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢?首先,直接修改node_modules里面的文件是不太行的,重新安装依赖就没有了。一般常用办法有两个:

  • 下载别人代码到本地,放在src目录,修改后手动引入。
  • fork别人的代码到自己仓库,修改后,从自己仓库安装这个插件。

这两个办法的缺陷就是:更新麻烦,我们每次都需要手动去更新代码,无法与插件同步更新。如果我们要修改的代码仅仅是别人的一个小模块,其他大部分代码都不动,这时候有一个很投机的操作:利用 webpack alias 来覆盖别人代码。

webpack alias 的作用

webpack alias一般用来配置路径别名,使我们可以少写路径代码:

chainWebpack: config => {
  config.resolve.alias
   .set('@', resolve('src'))
   .set('#', resolve('src/views/page1'))
   .set('&', resolve('src/views/page2'));
},

也就是说,webpack alias会替换我们写的“简写路径”,并且它对node_modules里面的文件也是生效的。这时候我们可以将别人源码里面引用模块的路径替换成我们自己的文件。
具体操作如下:

  1. 找到别人源码里面的需要修改的模块,到src目录
  2. 修改其中的bug,注意里面引用其他的文件都需要写成绝对路径
  3. 找到这个模块被引入的路径(我们需要拦截的路径)
  4. 配置webpack alias

实际操作一下

以qiankun框架的patchers模块为例:

详解如何修改 node_modules 里的文件

文件被引用的路径为:./patchers(我们要拦截的路径)

详解如何修改 node_modules 里的文件

文件内容为:

详解如何修改 node_modules 里的文件

复制内容到src/assets/patchers.js,修改其 import 路径为绝对路径,并添加我们的代码:

详解如何修改 node_modules 里的文件

配置webpack alias(我用的是vue-cli4,配置文件是vue.config.js):

const path = require('path');
module.exports = {
 chainWebpack: config => {
  config.resolve.alias
   .set('./patchers', path.resolve(__dirname, 'src/assets/patchers.js'))
 }
};

运行代码,控制台打印成功,表明我们已经成功覆盖别人的代码,而且别人的代码有更新时,我们也可以同步更新,只是这个模块的代码使用我们自定义的。打包之后也是可以的。

详解如何修改 node_modules 里的文件

补充:使用patch-package来修改

经掘友 @Leemagination 指点,使用patch-package来修改node_modules里面的文件更方便

步骤也很简单:

  1. 安装patch-package:npm i patch-package --save-dev
  2. 修改package.json,新增命令postinstall:
"scripts": {
+ "postinstall": "patch-package"
 }

修改node_modules里面的代码

执行命令:npx patch-package qiankun。

第一次使用patch-package会在项目根目录生成patches文件夹,里面有修改过的文件diff记录。

详解如何修改 node_modules 里的文件

当这个包版本更新后,执行命令:git apply --ignore-whitespace patches/qiankun+2.0.11.patch即可。其中qiankun+2.0.11.patch是它生成的文件名。

结尾

这个办法虽然投机,也有很多局限性,但是也很好用,技术就是需要不断的探索。有什么问题或者错误,欢迎指出!

到此这篇关于详解如何修改 node_modules 里的文件的文章就介绍到这了,更多相关node_modules 修改内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
文字幻灯片
Jun 26 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
jquery实现手风琴案例
May 04 jQuery
Node.js API详解之 readline模块用法详解
May 22 #Javascript
vue+canvas实现移动端手写签名
May 21 #Javascript
基于canvas实现手写签名(vue)
May 21 #Javascript
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
js cavans实现静态滚动弹幕
May 21 #Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 #Javascript
JavaScript实现HSL拾色器
May 21 #Javascript
You might like
php错误级别的设置方法
2013/06/17 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python3实现windows下同名进程监控
2018/06/21 Python
在python中pandas的series合并方法
2018/11/12 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
Python何时应该使用Lambda函数
2019/07/02 Python
django 中QuerySet特性功能详解
2019/07/25 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
解决python对齐错误的方法
2020/07/16 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
美术毕业生求职信
2014/02/25 职场文书
项目采购员岗位职责
2014/04/15 职场文书
销售经理岗位职责
2015/01/31 职场文书
预备党员入党感想
2015/08/10 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
vue动态绑定style样式
2022/04/20 Vue.js