详解如何修改 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 页面坐标相关知识整理
Jan 09 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
vue路由跳转传递参数的方式总结
May 10 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 高手之路(二)
2006/10/09 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
python私有属性和方法实例分析
2015/01/15 Python
深入学习python的yield和generator
2016/03/10 Python
Python实现新浪博客备份的方法
2016/04/27 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python测试人员需要掌握的知识
2018/02/08 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python编程使用协程并发的优缺点
2018/09/20 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
在Django中实现添加user到group并查看
2019/11/18 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
开门红主持词
2014/04/02 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
小学同学聚会感言
2015/07/30 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python