【问题解决】使用patch-package修改node-models中的源码

一、应用场景

最近在进行开源平台的二开工作，有一些功能不可避免的需要改动一些依赖包的源码，会修改node_models中的代码。

在开发环境中，我们可以直接通过yarn gulp -> yarn start进行编译测试，但是如果我想将代码同步到仓库时候则遇到了问题：一般不会将node_models文件进行同步，则别人拉下来的代码依然是未修改的版本。

那么如何解决这个问题呢？

二、patch-package 和 postinstall

patch-package

patch-package 是一个用于修改第三方依赖包的工具，主要用途包括：

• 临时修复依赖包中的bug：当第三方库有bug但未及时修复时，可以直接修改源码
• 定制化需求：对依赖包进行个性化修改以满足特定需求
• 紧急修复：在等待官方修复期间，使用本地补丁解决问题

使用流程：

1. 安装 patch-package 到开发依赖
2. 直接修改 node_modules 中的依赖包代码
3. 生成补丁文件
4. 提交补丁文件到版本控制系统

postinstall

postinstall 是 npm/yarn 的生命周期钩子脚本之一：

• 自动执行：在执行 npm install 或 yarn install 后自动运行
• 定义位置：在 package.json 的 scripts 字段中定义
• 常见用途：
  • 应用补丁（如使用 patch-package）
  • 构建原生模块
  • 初始化项目配置
  • 执行必要的设置脚本

三、操作步骤

1、使用yarn安装patch-package和postinstall-postinstall

命令行：

yarn add patch-package postinstall-postinstall

报错解决：

对于工程需要明确：将依赖项添加到根还是添加到特定的工作区包：

若：将依赖项添加到根 workspace，执行：

yarn add <package-name> -W
# 或者
yarn add <package-name> --ignore-workspace-root-check

若：将依赖项添加到特定的工作区包，执行：

yarn workspace <workspace-name> add <package-name>

所以以上代码替换为：

yarn add patch-package postinstall-postinstall -W

2、修改package.json

// package.json
"scripts": {"postinstall": "patch-package",
}

postinstall 是 npm 或 yarn 安装依赖后自动执行的脚本，通常用于执行后续配置或修补操作。这里将其指向patch-package

3、修改node-model中源码、保存。

4、找到修改文件对应的包名

执行以下代码：

yarn patch-package 你的包名# 以protomaps为例
yarn patch-package protomaps

然后会在根目录下出现：

5、使用git将新增的patches文件同步到仓库

(新安装包后，yarn.lock也会修改，因此同步提交)

6、新环境拉下仓库，验证修改是否成功。

执行yarn install的时候会自动执行patch-package，自动替换源码补丁。修改成功

四、通过git维护自定义依赖库

若需要二开大量修改源码的时候，还可以单独维护一个自定义依赖库。这样拉取代码的时候可以自动获取你修改后的依赖版本。

修改方式

在package.json中，找到devDependencies下对应的包名，将原先的版本号，替换为git+仓库路径：

例如，以terriajs包为例：

"devDependencies": {
"terriajs": "git+http://github.com/yourGitRepository/terriajs.git",
}

然后再次在终端输入以下命令，安装依赖并启动项目，偶尔会碰到github被墙的问题（也可以使用gitea/gitlab）

yarn install 
yarn gulp
yarn start

这样拉下来的就是更新后的版本了。