详解如何修改 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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
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读取html并截取字符串的简单代码
2009/11/30 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
vuex的使用步骤
2021/01/06 Vue.js
Python实现的ini文件操作类分享
2014/11/20 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
浅谈python锁与死锁问题
2020/08/14 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
外企财务年会演讲稿
2014/01/03 职场文书
总账会计岗位职责
2014/03/13 职场文书
工程售后服务承诺书
2014/05/21 职场文书
谢师宴邀请函
2015/02/02 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
师范生教育见习总结
2015/06/23 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
golang中的并发和并行
2021/05/08 Golang
Python中第三方库Faker的使用详解
2022/04/02 Python