如何修改一个npm包的源码?


背景

大家写代码的过程中经常会有这样一种场景,某个npm不符合自己的需求/有bug,但是总不能直接去改npm包源码。此时大概有这么几个方法修改代码:

  1. 把人家的代码down下来自己维护
  2. 自己写脚本替换代码

以上两种方法缺点都十分明显,难道真的没有其他办法了嘛?

patch-package简介

为了实现上述需求可以使用patch-package(从名字看就是对一个包打补丁),patch-package这个包会记录我们对npm包的修改,在执行patch命令后就会把npm包源码改成目标的样子。

patch-package用法

说了这么多下面直接来看一下怎么用(随便开一个空项目)

安装并配置patch-package

首先安装patch-package

npm i patch-package --save

然后我们肯定希望在安装一个包以后执行修改源码的命令,因此要写一下patch命令(官方文档写的很清楚)

"scripts": {
 "postinstall": "patch-package"
}

安装测试库

这里使用the-answer作为测试库(这个库足够简单)

npm i the-answer --save

准备一个测试文件

const answer = require( 'the-answer' );

console.error(answer) // 42

修改module源码

这里直接把the-answer里面的index由42改为41,然后执行patch-package

npx patch-package the-answer

删掉the-answer后重新执行npm i,运行index.js发现修改成功了

原理

既然patch-package这么好用,那是怎么修改npm包的源码呢?

在执行npx patch-package后可以发现根目录生成了一个patch文件夹

image.png

看patch文件的内容可以发现这是通过git diff生成的,这里面记录了被修改的文件名及具体改动。

image.png

在执行patch后会创建一个临时目录,在该目录内重新安装目标npm包后与修改后的包做对比,将change保存在patches文件夹内,这样就可以分析出源码被如何改动

以后再遇到类似的需求就可以通过patch轻松修改源码,提前8个小时下班不是梦 :D


Author: Maple
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Maple !
  TOC