专栏首页Vue开发社区如何修改 node_modules 里的文件
原创

如何修改 node_modules 里的文件

“ 关注 前端开发社区 ,回复 '领取资料',免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步

作者: 沉末_ https://juejin.im/post/5ec381215188256d776342cd

前言

有时候使用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里面的文件也是生效的。这时候我们可以将别人源码里面引用模块的路径替换成我们自己的文件。

具体操作如下:

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

实际操作一下

qiankun框架的patchers模块为例:

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

文件内容为:

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

配置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'))
  }
};

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

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

步骤也很简单:

  • 安装patch-package:npm i patch-package --save-dev
  • 修改package.json,新增命令postinstall:
"scripts": {
+  "postinstall": "patch-package"
 }
  • 修改node_modules里面的代码
  • 执行命令:npx patch-package qiankun。

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

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

结尾

这个办法虽然投机,也有很多局限性,但是也很好用,技术就是需要不断的探索。有什么问题或者错误,欢迎指出!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js正则过滤html标签

    前端老道
  • 十个超级实用的 ES6 特性

    “ 关注 前端开发社区 ,回复 '领取资源',免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步

    前端老道
  • Vue项目团队代码规范

    “ 关注 前端开发社区 ,回复 '领取资料',免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步

    前端老道
  • 如何科学修改 node_modules 里的文件

    有时候使用npm上的包,发现有bug,我们知道如何修改,但是别人可能一时半会没法更新,或者是我们特殊需求,别人不愿意修改,这时候我们只能自己动手丰衣足食。那么我...

    coder_koala
  • Android高频面试专题 - 进阶篇(三)Binder机制

    Android作为移动端操作系统,传统的Linux进程间通信机制不满足于Android,所以开发了一套新的IPC机制,就是Binder机制。

    Android扫地僧
  • 怎样做情感分析

    本文结构: 什么是情感分析? 怎么分析,技术上如何实现? ---- cs224d Day 7: 项目2-命名实体识别 2016课程地址 项目描述地址 ----...

    杨熹
  • 机器学习 | 使用statsmodels和sklearn进行回归分析

    记录一下使用Python进行的单变量回归分析的操作流程。另外推荐一个sklearn机器学习的哔哩哔哩视频(文末阅读原文,进行观看)。

    邓飞
  • Python编程思想(27):类的继承

    继承是面向对象的3大特征之一(另两个特性是封装和组合),也是实现软件复用的重要手段。Python的继承是多继承机制,也就是一个子类可以同时有多个直接父类。

    蒙娜丽宁
  • 扔掉log4j、log4j2,自己动手实现一个多功能日志记录框架,包含文件,数据库日志写入,实测5W+/秒日志文件写入,2W+/秒数据库日志写入,虽然它现在还没有logback那么强大

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    eguid
  • 雷军的三起三落

    武汉大学的樱园路,是著名的赏樱胜地,每年三月份,这里游人如织,路边的樱花树,枝繁叶茂,把天空都刷成了粉色,风一吹就会下起樱花雪。

    挖数

扫码关注云+社区

领取腾讯云代金券