如何优雅地修改node_modules里依赖的源码？

在思维导图组件尝鲜——OpenTiny的MindMap组件这篇文章里，我们做了一个小优化，修改了node_modules里的源码，去实现我们自己的业务功能。

现在问题来了：这一部分的小改动我要如何提交？

• 可以让每个人都把这段代码改一下，但是治标不治本。来个新员工，或者换个设备，又得操作一下。

• 可以把node_modules的内容提交到Git上去，修改一下.gitignore文件，但也是不合理的操作。

pnpm提供的补丁功能patch

pnpm patch <package-name><package-version> # 生成修改路径
pnpm patch-commit <file-path> # 将改动发布

试一试

第一步：先找到我们需要改的那个依赖名以及版本号，执行命令：

pnpm patch @opentiny/vue-mind-map@3.16.0

执行完成之后，控制台有提示信息：

第二步：根据上面的提示信息，打开对应的目录：

我们看到这个目录就是@opentiny/vue-mind-map@3.16.0的一个拷贝，我们可以直接在这里新增我们自己的逻辑。这里如图，把原来的2改成5。

第三步：提交改动，用pnpm patch-commit命令(可直接拷贝第一步的命令执行结果)

pnpm patch-commit /private/var/folders/g1/ckjkxqqd0n75dhqnz6khn5fw0000gn/T/80cd271dfa3ed8105071127b49bb1a19

执行完成之后，相当于重新执行了install命令。

至此我们的补丁已经打好了。

项目中有哪些变化

1. package.json的变化：多了补丁依赖的声明

2. pnpm-lock.yaml：这个文件是package.json的一个映射，因此package.json的变化在这个文件中也体现出来了：

3. 本地生成了一个patches文件夹，里面存放了我们对这个依赖的改动，展示方式就像Git一样，把差异点显示出来了：

4. node_modules下的这个依赖包，我们发现包名和内容都发生了变化：

总结

使用pnpm patch可以给依赖包打补丁，补丁的改动可以直接提交到Git上，使用者无感知。Demo地址：github.com/beat-the-bu…