给node_modules打补丁

前言

使用nodejs开发时，难免会遇到第三方依赖包出现bug或者满足不了你需求的情况，如果这个依赖包是开源的，我们可以去开源仓库下载源码修改编译使用，如果这个依赖包不是开源的，那该怎么办呢？就算是开源的，下载源码再编译也是很耗时的一个工作。

我们都知道，node_modules里面的文件是可以直接编辑的，编辑后保存重启项目就行。如果有一天不小心删除了node_modules或者换了一台开发电脑或者团队开发，总不能每一次都要去重新修改node_modules里面的文件吧，万一忘记修改了呢。这个时候我们就可以对这个node_modules里面的文件打补丁，通过打补丁的方式，只需要修改一次要改的文件就可以了。

接下来，将介绍如何使用patch-package这个神奇的工具对依赖包打补丁。

需求

因为我的个人博客使用的是VitePress工具构建的，其内置的样式对我来说不是很满意，特别是中间内容区域太窄了，通过调试，我用自定义样式将内容区域变宽，这个时候页面的响应式出现了问题导致页面布局错乱。通过调试发现媒体查询@media (min-width 1440px)的宽度是这样的，而我想要的是@media (min-width: 1810px)这样的，通过样式覆盖肯定是满足不了啦，只能去node_modules修改源码，于是我找到了node_modules/vitepress/dist/client/theme-default/components/VPContent.vue这个文件，将里面的css给改成我想要的，然后打补丁。

执行过程

安装依赖

bash

npm install patch-package --save-dev

修改package.json文件

增加新的脚本命令postinsall，这个命令会在npm install或yarn执行完成之后自动执行。

json

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

修改node_modules的文件

vue

<!-- node_modules/vitepress/dist/client/theme-default/components/VPContent.vue -->
<script setup lang="ts">
    // 代码省略...
</script>

<template>
	<!-- 代码省略 --> 
</template>

<style scoped>
/** 这是旧的代码
@media (min-width: 1440px) {
  .VPContent.has-sidebar {
    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
  }
}
*/   

/* 这是修改后的代码 */
@media (min-width: 1810px) {
  .VPContent.has-sidebar {
    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
  }
}
</style>

生成补丁

bash

# 命令格式: npx patch-package packagename
# 其中packagename是要修改的依赖包的名称，比如需求中修改的就是vitepress中的代码
npx patch-package vitepress

命令执行成功后，会在项目的根目录（也就是node_modules同级目录）出现一个patches文件夹，里面的文件就是刚刚打好的补丁文件。

将patches文件夹上传到代码版本控制系统中就可以了，这样在每次执行npm install时，会自动把补丁打到node_modules对应的包下面。

给node_modules打补丁 ​

前言 ​

需求 ​

执行过程 ​

给node_modules打补丁

前言

需求

执行过程