文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何科学修改node_modules里的文件

2024-12-11 18:40

关注

有时候使用npm上的包,发现有bug,我们知道如何修改,但是别人可能一时半会没法更新,或者是我们特殊需求,别人不愿意修改,这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢?首先,直接修改node_modules里面的文件是不太行的,重新安装依赖就没有了。一般常用办法有两个:

  1. 下载别人代码到本地,放在src目录,修改后手动引入。
  2.  fork别人的代码到自己仓库,修改后,从自己仓库安装这个插件。

这两个办法的缺陷就是:更新麻烦,我们每次都需要手动去更新代码,无法与插件同步更新。如果我们要修改的代码仅仅是别人的一个小模块,其他大部分代码都不动,这时候有一个很投机的操作:利用 webpack alias 来覆盖别人代码。

webpack alias 的作用

webpack alias一般用来配置路径别名,使我们可以少写路径代码: 

  1. chainWebpack: config => {  
  2.     config.resolve.alias  
  3.       .set('@', resolve('src'))  
  4.       .set('#', resolve('src/views/page1'))  
  5.       .set('&', resolve('src/views/page2'));  
  6. }, 

也就是说,webpack alias会替换我们写的“简写路径”,并且它对node_modules里面的文件也是生效的。这时候我们可以将别人源码里面引用模块的路径替换成我们自己的文件。

具体操作如下:

  1.  找到别人源码里面的需要修改的模块,复制代码到src目录
  2.  修改其中的bug,注意里面引用其他的文件都需要写成绝对路径
  3.  找到这个模块被引入的路径(我们需要拦截的路径)
  4.  配置webpack alias

实际操作一下

以qiankun框架的patchers模块为例:

文件被引用的路径为:./patchers(我们要拦截的路径)

文件内容为:

复制内容到src/assets/patchers.js,修改其 import 路径为绝对路径,并添加我们的代码:

配置webpack alias(我用的是vue-cli4,配置文件是vue.config.js): 

  1. const path = require('path');  
  2. module.exports = {  
  3.   chainWebpack: config => {  
  4.     config.resolve.alias  
  5.       .set('./patchers', path.resolve(__dirname, 'src/assets/patchers.js'))  
  6.   } 
  7. }; 

运行代码,控制台打印成功,表明我们已经成功覆盖别人的代码,而且别人的代码有更新时,我们也可以同步更新,只是这个模块的代码使用我们自定义的。打包之后也是可以的。

补充:使用patch-package来修改

经掘友 @Leemagination 指点,使用patch-package来修改node_modules里面的文件更方便

步骤也很简单:

  1.  安装patch-package:npm i patch-package --save-dev
  2.  修改package.json,新增命令postinstall: 
  1. "scripts": {  
  2. +  "postinstall": "patch-package"  
  3.  } 

      3.  修改node_modules里面的代码

      4.  执行命令:npx patch-package qiankun。

第一次使用patch-package会在项目根目录生成patches文件夹,里面有修改过的文件diff记录。

当这个包版本更新后,执行命令:git apply --ignore-whitespace patches/qiankun+2.0.11.patch即可。其中qiankun+2.0.11.patch是它生成的文件名。

关于这个 loader 我已经发布到 npm 上,有兴趣的朋友可以直接调用 npm install async-catch-loader -D 安装和研究,使用方法和一般 loader 一样,记得放在 babel-loader 后面,以便优先执行,将注入后的结果继续交给 babel 转义 

  1.  
  2.     test: /\.js$/,  
  3.     use: [  
  4.         "babel-loader?cacheDirectory=true",  
  5.         'async-catch-loader'  
  6.     ]  

更多细节和源代码可以查看 github,同时本文对您有收获的话,希望能点个 star,非常感谢~ 

 

来源:前端教程内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯