修改第三方npm包

文章目录

  • 一、前言
  • 二、补丁方案
    • 2.1、`patch-package`
    • 2.2、`pnpm patch`
  • 三、换日方案
  • 四、总结
  • 五、最后

一、前言

在开发过程中,发现某个npm包有Bug,应该怎么办?可以试试下面这2种方案:

  1. 代码量少,可以直接修改npm包代码的,考虑补丁方案。
  2. 代码量多,或者npm包代码是压缩混淆过的,不具备修改条件。修改源码后,再修改包名,重新发布,在应用代码中更换引用。为叙文方便,我将这种方案命名为换日方案(偷天换日,李代桃僵)。

二、补丁方案

2.1、patch-package

patch-package是一个用于修复第三方依赖包的工具,使用方式非常简单。

它支持npmyarn v1,如果是yarn v2+或者pnpm,则使用自带的patch方案(下文会介绍pnpm方案)。

安装:

$ npm i patch-package
$ yarn add patch-package postinstall-postinstall

如果只是前端使用,可以添加--dev-D参数。如果是后端使用,为保障生产模式(会去除devDendencies依赖)也能正常使用,就不要加了。

node_modules中找到你要修改的npm包,修改内容后,就可以运行patch-package创建patch文件了。

$ npx patch-package package-name   # 使用npm
$ yarn patch-package package-name  # 使用yarn

运行后会在项目根目录下创建一个patches文件夹,并生成一个名为package-name+version.patch的文件。将该patch文件提交至版本控制中,即可在之后应用该补丁了。

以我修改的verdaccio为例,会生成一个verdaccio+4.4.0.patch的文件,内容大致如下:

diff --git a/node_modules/verdaccio/build/index.js b/node_modules/verdaccio/build/index.js
index 3a79eaa..d00974b 100644
--- a/node_modules/verdaccio/build/index.js
+++ b/node_modules/verdaccio/build/index.js
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {});exports.default = void 0;+console.log('---------------')
+var _bootstrap = require("./lib/bootstrap");

完成上述操作后,最后在package.jsonscripts中加入"postinstall": "patch-package"

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

这样当其他同事拉下代码,运行npm install或是yarn install命令时,便会自动为依赖包打上我们的补丁了。

简单来说,这个方案的原理就是记录补丁的代码与位置,利用npmhookpostinstall会在npm install后触发),在安装完依赖以后,触发相应的脚本,将补丁覆盖到node_modules对应的包里。

当然,补丁是对应具体版本的,需要锁定版本号。这样的缺点是如果要升级的话,还得重新来一遍,不过不是有Bug或性能问题,通常不必追求新的版本。

2.2、pnpm patch

pnpmpatch自称灵感来自yarn的类似命令。由于yarn v2可能走了邪路,我们就不介绍了。

首先,执行pnpm patch <pkg name>@<version>。该命令会将指定的软件包提取到一个可以随意编辑的临时目录中。

完成修改后, 运行pnpm patch-commit <path>(是之前提取的临时目录,这个临时目录会长到你根本记不住,不过不用担心,命令行里会有完备的提示) 以生成一个补丁文件,并提供patchedDependencies 字段注册到你的项目中。

比如,我想修改一个is-even的包:

pnpm patch is-even  
You can now edit the following folder: /private/var/folders/sq/0jfgh1js6cs8_31df82hx3jw0000gn/T/29ba74c7c7ffd7aa157831c6436d3738Once you're done with your changes, run "pnpm patch-commit /private/var/folders/sq/0jfgh1js6cs8_31df82hx3jw0000gn/T/29ba74c7c7ffd7aa157831c6436d3738"

按照提示,打开这个文件夹,加一行代码:

img

执行上面控制台的提示:

pnpm patch-commit /private/var/folders/sq/0jfgh1js6cs8_31df82hx3jw0000gn/T/e103de90617a18eee7942d1df35a2c48
Packages: -1
-
Progress: resolved 5, reused 6, downloaded 0, added 1, done

这时你会发现package.json中多了一段内容:

"pnpm": {"patchedDependencies": {"is-even@1.0.0": "patches/is-even@1.0.0.patch"}
}

根目录下,也多了个文件夹patches,打开以后,你就能找到添加的代码:

img

打开node_modules/is-even/index.js,可以看到已经多了我们添加的代码:

img

删除node_modules,重新pnpm i安装依赖,仍然与现在一样,这就代表成功了。

整个流程下来,我们看得出来相比于patch-package,要稍微复杂点儿,但也是可以接受的。

注意:patches目录是一定得提交到git的。

三、换日方案

如果要修改的代码较多,或者不具备修改条件,这时就需要修改源码。到GitHub上找到npm包的源码,Fork该项目,修改代码后,再修改包名,重新发布,比如你要修改的包是lodash,可以修改为awesome-lodash,在应用代码中更换引用。

本来这个方案没什么好说的,但有一种情况,如果你修改的是个底层包,也就是说并不是你的应用代码中直接引用的,而是你引用的npmA所依赖的,甚至可能同时被包B依赖的,这时就比较尴尬了,你不可能再去修改AB的源码,那就太不值当了。

pnpm提供了一种别名(Aliases)的能力。

假设你发布了一个名为awesome-lodash的新包,并使用lodash作为别名来安装它:

$ pnpm add lodash@npm:awesome-lodash

不需要更改代码,所有的lodash引用都被解析到了awesome-lodash。就这么简单,上面说的问题就解决了。

再说点儿题外话,有时你会想要在项目中使用一个包的两个不同版本,很简单:

$ pnpm add lodash1@npm:lodash@1
$ pnpm add lodash2@npm:lodash@2

现在,您可以通过 require('lodash1') 引入第一个版本的 lodash 并通过 require('lodash2') 引入第二个。

pnpm的钩子结合使用功能会更加强大,比如你想将node_modules里所有的lodash引用也替换为awesome-lodash,你可以用下面的.pnpmfile.cjs 轻松实现:

function readPackage(pkg) {if (pkg.dependencies && pkg.dependencies.lodash) {pkg.dependencies.lodash = 'npm:awesome-lodash@^1.0.0'}return pkg
}module.exports = {hooks: {readPackage}
}

四、总结

在开发过程中发现npm包的Bug,首先向原作者提交issueFork代码修改后提交合并请求。但遇到不活跃或拒绝修改的情况,项目等待时间会很长。这时可以使用补丁方案或换日方案进行解决。

补丁方案中,如果是npmyarn v1,可以使用patch-package工具包处理;如果是yarn v2pnpm,可以使用各自的patch命令。

换日方案,则是修改源码,发布新的npm包后,利用pnpm的别名功能,将所有依赖原npm包的地方,全部替换为新的包。

这种场景在日常开发中还是比较常见的,这里为大家提供一种思路。当然,如果真是个Bug,别忘了提issuePR,为开源贡献自己的一份力量,在与作者的沟通交流中,相信你也能受益匪浅。

五、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/299118.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

初入职场不会Git?经常被团队成员怼?手把手教你如何使用git

Git分支合并选择 简介&#xff1a; 用Git进行多人协作开发时&#xff0c;必然会合并代码&#xff0c;解决冲突。然而合并代码也是需要点技巧的&#xff0c;如果对一些关键命令没有理解去使用的话&#xff0c;git的版本演进路线就会变得很乱&#xff0c;从而造成了日后维护的一…

【svn】win11最新svn每天自动化定时update、commit,隐藏窗口,定时脚本编写

本文使用schtasks结合bat脚本实现全自动svn update以及commit操作。执行时隐藏cmd窗口&#xff0c;全自动后台执行。 执行脚本 写脚本参考了网上很多文章&#xff0c;但是这些文章的方法都有问题或者已经失效&#xff0c;比如&#xff1a; 老版本的bat脚本&#xff0c;使用v…

vscode不同代码的项目分配不同的工作区

vscode不同代码的项目分配不同的工作区 很多时候我们很多项目都需要使用vscode来进行编写代码&#xff0c;像我个人会拿vscode写python&#xff0c;linux远程写代码&#xff0c;前端和stm32的编辑器&#xff0c;这些项目都有自己的插件&#xff0c;如果我们启动某一个项目&…

JVM内存结构Java内存模型Java对象模型

悟空老师思维导图&#xff1a;https://naotu.baidu.com/file/60a0bdcaca7c6b92fcc5f796fe6f6bc9https://naotu.baidu.com/file/60a0bdcaca7c6b92fcc5f796fe6f6bc9 1.JVM内存结构&&Java内存模型&&Java对象模型 1.1.JVM内存结构 1.2.Java对象模型 Java对象模型…

SQL变更评审常见问题分享

SQL变更评审分享 概述 SQL变更&#xff0c;是我们在开发迭代中不可避免的场景&#xff0c;SQL变更通常是指DDL和DML语句变更&#xff0c;这些sql会影响到数据库表结构或具体数据&#xff0c;变更时如果执行到存在问题的sql脚本&#xff0c;会对实际应用操作难以评估的损失&…

JuiceSSH结合内网穿透实现公网远程访问本地Linux虚拟机

文章目录 1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 处于内网的虚拟机如何被外网访问呢?如何手机就能访问虚拟机呢? cpolarJuiceSSH 实现手机端远程连接Linux虚拟机(内网穿透,手机端连接Linux虚拟机) …

DHT11编程

实验&#xff1a;用数码管显示温湿度 dht11.h #ifndef _DHT11_H #define _DHT11_H #include "stm32f10x_conf.h"extern void dht11_init(void); extern void Get_Dht_Value(char *buf); #endifdht11.c #include"dht11.h" #include"bitband.h" …

Kylin-Desktop-V10-SP1-General-Release-2303-X86_64-海光版(hygon c86)镜像虚拟机安装

选择60G 自定义硬件 设置内存、cpu、网络为桥接 点击开启虚拟机 在下一步中输入用户名和密码 等待安装完成 取出安装介质&#xff1a;先关机&#xff0c;再按照下图操作 移除&#xff0c;并确认 再开机&#xff0c;等待启动成功 系统版本

04|提示工程(上):用少样本FewShotTemplate和ExampleSelector创建应景文案

04&#xff5c;提示工程&#xff08;上&#xff09;&#xff1a;用少样本FewShotTemplate和ExampleSelector创建应景文案 当你用 print 语句打印出最终传递给大模型的提示时&#xff0c;一切就变得非常明了。 您是一位专业的鲜花店文案撰写员。 对于售价为 50 元的 玫瑰 &…

基于 Python 和Surprise库,新手轻松搭建推荐系统

解密基于用户的推荐系统。 1、简介 在数据时代&#xff0c;推荐系统是提升用户体验的重要工具。今天介绍如何使用亚马逊的电影评分数据集创建电影推荐系统。 2、数据加载与探索 首先&#xff0c;通过加载和探索数据集开启数据分析过程。首先导入Pandas和Numpy&#xff0c;这…

2024年【天津市安全员C证】找解析及天津市安全员C证模拟考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 天津市安全员C证找解析考前必练&#xff01;安全生产模拟考试一点通每个月更新天津市安全员C证模拟考试题题目及答案&#xff01;多做几遍&#xff0c;其实通过天津市安全员C证模拟考试题库很简单。 1、【多选题】《建…

飞桨星河社区助力大模型时代开发者砥砺前行!

大模型引领AI新浪潮&#xff0c;助力人工智能实现从感知理解到生成创造的飞跃。飞桨星河社区&#xff0c;覆盖深度学习初学者、在职开发者、企业开发者、高校教师、创业者等&#xff0c;是国内最大的AI开发者社区&#xff0c;以飞桨和文心大模型为核心&#xff0c;集开放数据、…