详解如何修改 node_modules 里的文件

前言

有时候使用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模块为例：

文件被引用的路径为：./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里面的文件更方便

步骤也很简单：

  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记录。

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

结尾

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

到此这篇关于详解如何修改 node_modules 里的文件的文章就介绍到这了,更多相关node_modules 修改内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈Node新版本13.2.0正式支持ES Modules特性

    在本月 21 日,即2019.11.21,Node.js 发布了 13.2.0 版本,更新了一些特性.其中最令人兴奋的莫过于正式取消了 --experimental-modules 启动参数.这说明Node.js 正式支持 ES modules.我们一起来看看. Stability Index说明 Stability Index,即 Api 的稳定指数说明.它包括3个值: Stability: 0 ,不推荐使用.表示该Api官方不推荐使用,该功能可能会发出警告.不能保证向后兼容. Stabili

  • node中modules.exports与exports导出的区别

    一:node是什么? node只是平台,或者说是环境,其实用的还是js语法 主要框架express以及koa,两个框架是同一个团队开发,node中也有类似于php的Ci框架的MVC模式 M->model数据层的增删改差操作 V->view视图层 C->controller路由控制,主要起到转发工作 一个完整的node构成:node.js+express+mysql 二:工作代码的顺序: app.js为node的入口文件, 在view写好html文件,模板可以任意, rouer负责路由跳转

  • vue中node_modules中第三方模块的修改使用详解

    最近用vue在做一个项目,github用上找了一个日历插件,intall到了本项目中,配好以后发现插件的样式风格和项目总体风格相差较大,所以就像这个改一下插件风格, 第一种方法:我直接在父组件中将style标签的scoped的属性去掉了,在父组件中直接写了想要的样式,重叠样式全部!important,结果确实生效了 第二种方法:本想这个要是样式这么改,还有路可走:要是插件的底层方法呢,如果有对外开发的修改入口还行,要是没有,可咋办,于是想着能不能直接去改下这个插件,这样直接一锤子到底, 在nod

  • 详解如何修改 node_modules 里的文件

    前言 有时候使用npm上的包,发现有bug,我们知道如何修改,但是别人可能一时半会没法更新,或者是我们特殊需求,别人不愿意修改,这时候我们只能自己动手丰衣足食.那么我们应该如何修改别人的源码呢?首先,直接修改node_modules里面的文件是不太行的,重新安装依赖就没有了.一般常用办法有两个: 下载别人代码到本地,放在src目录,修改后手动引入. fork别人的代码到自己仓库,修改后,从自己仓库安装这个插件. 这两个办法的缺陷就是:更新麻烦,我们每次都需要手动去更新代码,无法与插件同步更新.如

  • 详解C 语言项目中.h文件和.c文件的关系

    详解C 语言项目中.h文件和.c文件的关系 在编译器只认识.c(.cpp))文件,而不知道.h是何物的年代,那时的人们写了很多的.c(.cpp)文件,渐渐地,人们发现在很多.c(.cpp)文件中的声明语句就是相同的,但他们却不得不一个字一个字地重复地将这些内容敲入每个.c(.cpp)文件.但更为恐怖的是,当其中一个声明有变更时,就需要检查所有的.c(.cpp)文件. 于是人们将重复的部分提取出来,放在一个新文件里,然后在需要的.c(.cpp)文件中敲入#include XXXX这样的语句.这样即

  • 详解如何修改MySQL最大连接数

    修改 MySQL 最大连接数 JDBC 操作MySQL数据库的时候 遇到这行报错 很明显 是数据库连接数超限了修改MySQL数据库连接数 具体操作如下 查看 MySQL 数据库当前默认支持最大连接数 show variables like '%max_connections%'; +------------------------+-------+ | Variable_name | Value | +------------------------+-------+ | max_connect

  • 详解PHP防止直接访问.php 文件的实现方法

    详解PHP防止直接访问.php 文件的实现方法

    详解PHP防止直接访问.php 文件的实现方法 为了保证我们用 PHP 写的 API 的安全性要禁止除了接口外的访问方式. 比如我们的项目为 example, 其下有文件夹 dir1.有个接口文件 api.php. 结构为: 输入图片说明 这时候我们要求只能通过 example/api.php 来调用file.php里的服务,不能直接通过example/dir1/file.php来访问. 在 php 里有这样一个变量$_SERVER,这是个数组变量, 里面有各种键值对, 具体的可以搜索一下资料.

  • 详解python os.path.exists判断文件或文件夹是否存在

    os即operating system(操作系统),Python 的 os 模块封装了常见的文件和目录操作. os.path模块主要用于文件的属性获取,exists是"存在"的意思,所以顾名思义,os.path.exists()就是判断括号里的文件是否存在的意思,括号内的可以是文件路径. 举个栗子: import os #判断文件夹是否存在 dir = os.path.exists('C:\\Users\\Desktop') print('dir:', dir) #判断文件是否存在 f

  • 详解如何修改jupyter notebook的默认目录和默认浏览器

    详解如何修改jupyter notebook的默认目录和默认浏览器

    1 修改默认目录 最近刚刚开始学习Python,比较好的一个IDE就是jupyter Notebook.可以一个cell一个cell的显示结果,对于新手学习Python非常的实用. 但是有个蛋疼的地方就是,每次打开Notebook看到的都是c盘上"我的文档"上的文件.查了一些资料终于把默认路径改了. 方法如下: 1 .找到一个用于存放config文件的文件夹,用cmd来查找路径: 在cmd中 输入​命令 jupyter notebook --generate-config(前面是两个-

  • 详解如何修改nginx的默认端口

    详解如何修改nginx的默认端口

    首先找到配置文件在哪 whereis nginx.conf 你可以这几个目录都看一遍,看看配置文件在哪里.我这边正确目录是 /etc/nginx 其次找到真正的配置文件 cd 到 /etc/nginx 目录下 打开一看,懵了,哪里有 listen 80 这一行呢? 不过别着急,listen 80 肯定是有的,只不过没在这里面放了.你看,不是有 include 文件吗?在那里面也说不定. 好,然后去看看 sites-enabled 文件夹下有什么 好吧,这个文件又指向了 site-availabl

  • 详解eclipse项目中的.classpath文件原理

    详解eclipse项目中的.classpath文件原理

    目录 1 前言 2 作用 3 .classpath内容 3.1 kind="src" 3.2 kind="output" 3.3 kind="con" 3.3.1 JRE配置 3.3.2 Server Runtime配置 3.3.3 Web App Libraries配置 3.3.4 User Library配置 3.4 kind="lib" 3.5 顺序 1 前言 在使用eclipse或者myeclipse进行java项目开

  • 详解C#如何加密解密RAR文件

    目录 实践过程 效果 代码 实践过程 效果 代码 public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { FileMenu(Application.ExecutablePath + ",0", Application.ExecutablePath); string[] str =

  • 详解SQL Server数据库状态和文件状态

    数据库状态 (database states) 查询数据库的当前状态 : 1.查询所有数据库的状态 ,通过sys.databases目录视图的state_desc列 user master go select state_desc ,[name] from sys.databases go 2.查询指定数据库的状态,通过DATABASEPROPERTYEX函数的Status属性 select DATABASEPROPERTYEX('demoData','status') go 状态: ONLIN

随机推荐