npm 包 patchgit 使用教程

在前端开发中，经常需要使用第三方库或者组件，npm 是常用的 JavaScript 包管理器，但是有时候我们需要对某个依赖包进行本地调试，或者修改源代码并提交到 git 仓库，这时候就可以使用 npm 包 patchgit 来实现。

patchgit 是什么？

patchgit 是一个 npm 包，它可以将某个依赖包的源代码拷贝到本地文件夹，并把它链接到宿主项目中，以实现本地调试和修改源代码的目的。

安装 patchgit

使用 npm 安装 patchgit：

npm install patchgit --save-dev

使用 patchgit

前置条件

使用 patchgit 之前，需要了解以下概念：

• 目标依赖包：被修改或调试的依赖包；
• 宿主项目：依赖包所在的项目；
• 本地记录仓库：包含目标依赖包的 git 仓库，用于记录本地的修改并提交到 git 仓库；
• 本地分支：指向本地记录仓库的分支，用于记录当前的本地修改。

开始使用

1. 创建本地记录仓库：

   git clone https://github.com/<your-username>/<dependency-package>.git ~/patches/<dependency-package>

   上述命令中的 <your-username> 和 <dependency-package> 是针对目标依赖包的 git 仓库进行修改，如果目标依赖包没有源代码的 git 仓库，可以采用其他方式，例如手动创建本地文件夹。

2. 应用 patchgit：

   npx patchgit <dependency-package>

   此时，目标依赖包的源代码将被拷贝到 ~/patches/<dependency-package>/source 目录下，同时在宿主项目的 node_modules 目录下创建一个符号链接 <dependency-package>，指向 ~/patches/<dependency-package>/source。

3. 修改源代码：

   在 ~/patches/<dependency-package>/source 目录下进行修改，保存修改后，在宿主项目中即可看到变更。

4. 提交变更：

   cd ~/patches/<dependency-package>
   git add .
   git commit -m "modify dependency package"
   git push origin <local-branch-name>

   上述命令中的 <local-branch-name> 是本地分支的名称，默认值为 patchgit，如果您使用了其他名称，请替换为自己的名称。

5. 恢复依赖包：

   恢复依赖包的方法非常简单，只需要将宿主项目中的符号链接删除即可：

   rm -rf node_modules/<dependency-package>

示例代码

接下来，我们以 vue 为例，来演示使用 patchgit 进行本地调试和源代码修改的过程。

安装 patchgit

npm install patchgit --save-dev

创建本地记录仓库

git clone https://github.com/vuejs/vue.git ~/patches/vue

应用 patchgit

npx patchgit vue

修改源代码

在 ~/patches/vue/source 目录下，找到 src/platforms/web/entry-runtime-with-compiler.js 文件，在第 76 行添加以下内容：

document.write('<h1>hello patchgit</h1>');

提交变更

cd ~/patches/vue
git add .
git commit -m "modify vue source code"
git push origin patchgit

恢复依赖包

rm -rf node_modules/vue

总结

patchgit 是一个非常实用的 npm 包，它可以帮助我们实现本地调试和修改依赖包源代码的目的，使用起来也非常简单，但其中涉及到的概念和步骤较多，需要仔细阅读理解，才能最大程度地发挥其作用。我希望本文能够给大家带来一些帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663781e8991b448e22d3