详解如何修改 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 相关文章推荐
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
AngularJS Controller作用域
Jan 09 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
React 父子组件通信的实现方法
Dec 05 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从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
js 分栏效果实现代码
2009/08/29 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
中等生评语大全
2014/05/04 职场文书
体育比赛口号
2014/06/09 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2014年双拥工作总结
2014/11/21 职场文书
考察邀请函范文
2015/01/31 职场文书
遗失证明范文
2015/06/19 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL