详解如何修改 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 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
php的扩展写法总结
2019/05/14 PHP
浅谈Jquery核心函数
2015/06/18 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
python分割和拼接字符串
2013/11/01 Python
详谈python http长连接客户端
2017/06/12 Python
python GUI实例学习
2017/11/21 Python
python实现学生信息管理系统
2020/04/05 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
python实现简单猜单词游戏
2020/12/24 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
Shell如何接收变量输入
2012/09/24 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
委托书范文
2014/04/02 职场文书
现场活动策划方案
2014/08/22 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
党员作风建设整改方案
2014/10/27 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技