详解如何修改 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 相关文章推荐
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
Javascript无阻塞加载具体方式
2013/06/28 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
对python 自定义协议的方法详解
2019/02/13 Python
Python @property使用方法解析
2019/09/17 Python
使用python+whoosh实现全文检索
2019/12/09 Python
Django app配置多个数据库代码实例
2019/12/17 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
暑假实习求职信范文
2013/09/22 职场文书
高校毕业生登记表自我鉴定
2013/11/03 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
世界读书日的活动方案
2014/08/20 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
我爱我班主题班会
2015/08/13 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL