如何postinstall优雅地更改node_modules里的包

已于 2025-01-10 11:34:19 修改
阅读量318 收藏 1
点赞数 3
分类专栏： vue package.json 文章标签： 前端 vue.js node.js
于 2025-01-10 11:29:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_16672095/article/details/145053872
版权

在前端项目开发中，我们经常会遇到node_modules里的包有问题，当自己手动更改成正确的后，自己没问题了，但是别人重新npm install时还会有同样的问题，那么如何将node_modules的更改保存到项目中呢，这样别人在生成依赖后能有一个正常的环境

通过：

patch-package​www.npmjs.com/package/patch-package正在上传…重新上传取消

这个包可以在npm install后按照项目里保存的更改自动修改node_modules，非常好用

使用步骤：

一.安装

可以使用npm

 npm i patch-package -D

或yarn（postinstall-postinstall 确保在yarn remove时依旧能保持更正代码）

 yarn add patch-package postinstall-postinstall

二.设置

安装完后需要给package.json设置postinstall，在安装完node_modules后会自动执行

 

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

 

三.使用
 

  • 修改node_modules的内容
  • npx patch-package 修改的包名（执行完成后，会在项目目录生成一个文件夹，保存着此次修改的内容）
 

四.可以看到patch-package已经为我们创建了一个补丁。默认会在我们的根目录下创建一个patches文件夹。在patches文件夹下会创建依赖包名+版本号.patch的文件，文件描述了我们修改了什么，第几行，有点像git的提交记录
 

 

五.测试补丁是否有效
 

  • 手动删除node_modules文件夹，重新执行yarn安装依赖包。可以看到在依赖包安装结束后执行了patch-package命令，之前生成的补丁被应用了。因为我们配置了postinstall脚本，所以会自动执行patch-package命令
 

 

  • 查看node-modules中之前修改的antd修改的地方，查看之前修改的代码是否还存在。如果之前修改的代码还存在，说明补丁文件已经生效了，如果不存在，排查下是否哪个步骤出现了问题。
  • 最后将patches文件夹推送到远端仓库，日后无论是谁拉取代码，安装依赖，我们之前修改的部分都会生效的
  •  
    注意事项
     
  •  
    patch是锁定版本号的，如果升级了版本，patch内容将会失效，最好在package.json能够锁定版本号。
     
  •  
    修改的同时，也局限了升级的能力，尽量还是去提issue和PR。
     

                

        

    

  



    



                



	

		

			

				
					
如何修改node_modules里的代码

				
			

			

				

					weixin_46504400的博客
				

				

					07-10
					
					1528
					
				

			

		

		

			
				
多半是没有找对文件，例如 我们修改的是 lodash里面的某个API，一般我们先找个 lodash里的 package.json 文件，然后看 main（入口文件） 的指向，如果没有 package.json 文件，那应该就是默认的 index。这种很好懂，就是直接进 node_modules 中，找到那个包的代码，并修改对应的地方的代码，然后重启项目，就能达到我想要的效果。如果在，就说明补丁生效了。其实这个时候你本地已经使用到了你修改后的代码了，但问题是怎么让你的同事也同步到你的修改后的代码。

			
		

	



                

            
              



	

		

			

				
					
React项目如何对node_modules源码进行修改

				
			

			

				

					leograyu的博客
				

				

					04-12
					
					657
					
				

			

		

		

			
				
React项目如何对node_modules源码进行修改：使用patch-package给node_module中的包打补丁，覆盖node_modules第三方依赖包的源码

			
		

	



              


  
              

                


	

		

			

				
					
postinstall

				
			

			

				

					03-18
				

			

		

		

			
				
安装后
验证启动模式
ls / sys / firmware / efi / efivars
连接到阳离子
wifi菜单ping  ...
更新系统时间
timedatectl set-ntp true
建立硬盘分区
fdisk / dev / sda：g建立gpt分区表n添加一个新分区初始化初始化默认回车结束结束例如+ 100M，+ 100G，回车
：w保存分区方案：lsblk查看结果
分区方案efi 500M交换4G / 40G / xxx剩余所有luks加密
格式化分区
fdisk / gdisk：创建类型为EFI系统（EFI系统（在fdisk中）或ef00（在gdisk中）的分区。然后运行mkfs.fat -F32 / dev / <THAT>格式化为FAT32格式。mkfs.ext4 < / dev / root_partition>（根分区，主分区）mksw

			
		

	





	

		

			

				
					
如何将项目里node_modules的更改保存起来

				
			

			

				

					BeSentimental的博客
				

				

					12-03
					
					1166
					
				

			

		

		

			
				
在前端项目开发中，我们经常会遇到node_modules里的包有问题，当自己手动更改成正确的后，自己没问题了，但是别人重新npm install时还会有同样的问题，那么如何将node_modules的更改保存到项目中呢，这样别人在生成依赖后能有一个正常的环境
通过：
patch-package
https://www.npmjs.com/package/patch-package

这个包可以在npm install后按照项目里保存的更改自动修改node_modules，非常好用
使用步骤：
一.安装
可以

			
		

	



		

			
		



	

		

			

				
					
多人合作开发时 修改nodemodules该如何保存

				
			

			

				

					Ronaldouy的博客
				

				

					05-23
					
					353
					
				

			

		

		

			
				
修该nodemodules包并打补丁

			
		

	





	

		

			

				
					
修改node_modules源码，并保存，使用patch-package打补丁，git提交代码后，所有人可以用到修改后的

				
			

			

				

					weixin_47494533的博客
				

				

					04-14
					
					420
					
				

			

		

		

			
				
删除node_modules，重新npm install看是否成功。在 package.json 文件中的 scripts 中加入。修改你的第三方库的bug等。然后目录会多出一个目录文件。

			
		

	





	

		

			

				
					
vue修改node_modules中的文件后续安装依旧保存

				
			

			

				

					MadSnail00的博客
				

				

					07-14
					
					1212
					
				

			

		

		

			
				
修改node_modules中的文件

			
		

	





	

		

			

				
					
详解如何修改 node_modules 里的文件

				
			

			

				

					11-20
				

			

		

		

			
				
在这种情况下，直接修改`node_modules`目录中的文件是不可取的，因为一旦重新安装依赖，所做的修改就会丢失。通常有两种常见方法来解决这个问题：  1. **下载源码到本地**：将第三方库的源代码下载到项目的`src`目录...

			
		

	





	

		

			

				
					
科学修改node_modules中文件的三种方法

				
			

			

				

					CHANCE_wqp的博客
				

				

					03-10
					
					2346
					
				

			

		

		

			
				
在实际项目开发过程中会用到很多第三方包，其中有一些错误或者需要做兼容处理的地方，这时就需要能够在我们的项目中修改特定文件，并把这些修改固定下来，不被install后还原会去。以下介绍三种方法。该方法需额外安装 patch-package，还需执行命令，生成补丁文件。就能在每次执行install命令时将补丁内容替换到node_modules中对应的源文件中。
2、修改项目根目录下的 package.json 文件
执行如下命令
执行该命令后会在项目根目录中自动创建一个 patches 文件夹，该文件夹中就会出

			
		

	





	

		

			

				
					
如何保存应用第三方依赖包的改动？

				
			

			

				

					Cyj1414589221的博客
				

				

					10-10
					
					524
					
				

			

		

		

			
				
在我们项目开发时，使用的第三方依赖难免会存在问题，这时候给包作者反馈问题或提 PR 不一定能及时被修复，而且我们有可能需要基于它做定制，就需要维护一个改动的版本。第一种方式是 fork 依赖包的源码仓库，自己修改完新发布一个 npm 包，改用我们自己发的包，这种方式适合需要定制或大量改动时采用；另一种方式直接修改 node_modules 下的依赖包代码，但 node_modules 下的改动会被 git 忽略，需要将改动保存起来，可以使用这个包，或者包管理器的 cli 命令yarn patch。

			
		

	





	

		

			

				
					
postinstall-prepare

				
			

			

				

					05-06
				

			

		

		

			
				
安装后准备
在此软件包的postinstall脚本中运行应用程序的prepare npm脚本。
为什么
在yarn ， yarn install和yarn add <package>之后，Yarn会运行prepare脚本，但是在yarn remove <package>之后不会运行。 如果将此程序包添加到项目中，即使将yarn remove <package> ，它也将执行项目的prepare钩子。 这要求您的prepare脚本是幂等的，因为它将针对yarn ， yarn install和yarn add <package>运行两次

			
		

	





	

		

			

				
					
修改node_modules源码，并保存，使用patch-package打补丁

				
			

			

				

					前端蜗牛君
				

				

					06-21
					
					1818
					
				

			

		

		

			
				
首先，我们能想到的思路是直接修改第三方库的代码，不过这会带来团队协作的问题，你的改动需要同步到团队所有成员，比较麻烦。好在，我们可以使用 patch-package 这个库来解决这类问题。一方面，它能记录第三方库代码的改动，另一方面也能将改动同步到团队每个成员。我们以vue常用的 iview 组件库做实验，先安装一下：
我们随便修改一行，打开某个文件
在slot后面加了个test，然后我们希望这行修改的代码，在npm install重新安装组件库的时候仍存在。如何实现呢？
2、修改脚本 package.js

			
		

	





	

		

			

				
					
修改了node_modules的文件打包后不生效

				
			

			

				

					海风依旧
				

				

					11-19
					
					5979
					
				

			

		

		

			
				
问题：修改了node_modules的文件打包后不生效。原因是我们修改的虽然是源码，并且在我们本地测试的时候生效，但我们打包后引用的是node_modules编译打包后的文件

			
		

	





	

		

			

				
					
“postinstall“: “patch-package“ 修补安装包补丁

				
			

			

				

					hktkkkk的博客
				

				

					03-21
					
					2066
					
				

			

		

		

			
				
目录的情况下对安装的 npm 包进行修补（即，应用补丁）。这在您需要对依赖的包进行小修改以修复错误或更改功能时非常有用，但出于某种原因（例如，等待官方修复或是不兼容的版本问题）您不能或不想升级到新版本。目录中的所有补丁到相应的包上。目录并重新安装依赖之后，您的更改也仍然会被应用。来创建一个补丁文件。这个命令会在项目的根目录下创建一个。是一个钩子脚本，它在每次运行。安装所有依赖包之后，自动运行。文件夹，里面包含了修改的补丁。允许用户在不直接修改。这里是如何在项目中使用。如果使用 Yarn。

			
		

	





	

		

			

				
					
vuejs项目如何修改node_mudule为公用文件？

				
			

			

				

					草巾冒小子的博客
				

				

					07-30
					
					5896
					
				

			

		

		

			
				
vuejs修改node_mudule默认路径，多项目开发，可减少内存浪费


  最近整理之前做过的项目的时候，发现转移的资源内存太大？！ 
  查看了一下，发现之前每次都是单独引入vuejs、element-ui等等前端框架。 
  上手了之后，发现之前的这种做法，太浪费内存了，而且管理起来也不方便。
  
  
  
  这里总结一下：将所有项目的vuejs和element-ui等通用框架部分...

			
		

	





	

		

			

				
					
NodeJS 的 Postinstall

				
			

			

				

					
				

				

					10-05
					
					6608
					
				

			

		

		

			
				
其实基本无需理会 Postinstall，因为默认下 MeanJS 的 Postinstall 是 false
"scripts": {
  "start": "grunt",
  "test": "grunt test",
  "postinstall": "bower install --...

			
		

	





	

		

			

				
					
如何优雅的自动修改node_modules 中的依赖包内容？

				
			

			

				

					qq_41220477的博客
				

				

					06-12
					
					1449
					
				

			

		

		

			
				
背景简介：我们在使用第三方依赖包时如果遇到了 bug，通常解决的方式都是绕过这个问题，使用其他方式解决，较为麻烦。等待的时间不可控，此时就可以借助 patch-package 自己动手去修复该 bug，感觉是不是很棒。并且还可以在第三方依赖包上，根据业务需求扩展能力，但是问题在于，每当我们重新拉取项目时，需要重新对应修改，很是麻烦。给开发者提供了通过打“补丁”的方式，使得重新安装依赖包时能够保留之前对第三方依赖包的修改的一种解决方案。中的文件进行修改，即可启动项目，正常启动。中的文件为例，生成相应补丁。

			
		

	





	

		

			

				
					
修改了node_modules里的js文件怎么才能生效

					
最新发布

				
			

			

				

					02-28
				

			

		

		

			
				
<think>嗯，用户问的是修改了node_modules里的js文件怎么才能生效。这个问题看起来挺常见的，尤其是在开发过程中可能需要临时修改第三方依赖的时候。首先，我需要回忆一下node_modules的结构和作用。node_modules是npm或yarn安装依赖包的地方，通常不建议直接修改里面的文件，因为当重新安装依赖或者更新版本时，这些修改会被覆盖掉。不过，用户可能确实遇到了需要临时修改的情况，比如修复某个库的bug，或者进行本地调试。

接下来，我需要考虑用户为什么会直接修改node_modules里的文件。可能的情况是用户遇到了第三方库的bug，或者需要快速测试某个功能，而等待官方修复或提交PR来不及。这时候，直接修改可能是最快的解决方案，但显然这不是一个长期的解决办法。因此，我需要提供几种方法，既能临时生效，又能考虑长期的维护性。

首先，用户需要知道直接修改node_modules里的文件在重新安装依赖时会丢失，所以必须提醒他们这一点。然后，给出几种替代方法，比如使用patch-package工具，或者使用npm link，或者将修改后的库发布到私有仓库，或者使用webpack的alias功能。另外，可能还需要提到如何让构建工具（如webpack、vite）重新编译修改后的文件，或者配置缓存策略。

然后，我需要详细解释每种方法的步骤，比如如何使用patch-package生成补丁文件，并在postinstall脚本中自动应用补丁。这需要说明安装patch-package，修改文件，生成补丁，以及配置package.json的步骤。此外，使用npm link的话，需要将修改后的库链接到项目中，这可能适合长期开发的情况，但需要注意版本兼容性问题。

另外，用户可能需要知道如何配置构建工具，比如在vite或webpack中排除对某些模块的缓存，或者设置alias指向本地的修改版本。这需要具体给出配置示例，比如修改vite.config.js中的optimizeDeps.exclude选项，或者webpack的resolve.alias配置。

同时，安全问题也是一个考虑点，比如直接修改node_modules可能存在潜在的安全风险，尤其是如果项目是团队协作的话，其他人可能不会意识到这些修改，导致环境不一致。因此，推荐使用patch-package这样的工具，将补丁文件纳入版本控制，确保团队成员都能应用相同的修改。

用户可能的真实需求是希望快速解决问题，同时又不希望每次安装依赖时都手动修改。因此，强调自动化工具的重要性，比如patch-package的自动化流程，能够帮助用户在安装依赖后自动应用补丁，减少手动操作。

另外，可能需要提到其他替代方案，比如fork原仓库，进行修改后通过package.json直接引用GitHub仓库的commit或分支，这样可以利用npm或yarn的依赖解析功能。这种方法适用于需要长期维护修改的情况，尤其是当原仓库更新不频繁时。

最后，总结各种方法的优缺点，帮助用户根据具体情况选择最合适的解决方案。比如，临时调试可以使用直接修改并重启服务，但长期维护应使用patch-package或fork仓库的方法。同时，提醒用户尽量向原仓库提交PR，推动官方修复，避免长期维护分支带来的负担。</think>以下是针对修改 `node_modules` 后使变更生效的 7 种专业级解决方案及深度解析：

---

### 一、暴力刷新方案（临时调试）
```bash
# 删除构建缓存（Webpack/Vite通用）
rm -rf node_modules/.vite
rm -rf node_modules/.cache

# 重启开发服务器
npm run dev
```
**原理**：清除构建工具缓存强制重新编译  
**适用场景**：临时调试第三方库代码

---

### 二、持久化修改方案（推荐）
```bash
# 安装补丁工具
npm install patch-package --save-dev

# 修改 node_modules 目标文件后执行
npx patch-package package-name

# 配置自动补丁（package.json）
"scripts": {
  "postinstall": "patch-package"
}
```
**效果**：生成 `/patches` 目录存储修改差异，团队共享  
**优势**：版本控制友好，可持续维护

---

### 三、软链接开发方案
```bash
# 将修改后的模块设为独立项目
cd ~/projects/modified-package
npm link

# 在主项目中链接
cd ~/projects/main-project
npm link modified-package
```
**技术原理**：通过符号链接实现实时映射  
**适用场景**：长期维护定制化依赖

---

### 四、构建工具穿透配置
```js
// vite.config.js
export default {
  optimizeDeps: {
    exclude: ['modified-package'] // 禁用预构建
  }
}

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      'modified-package': path.resolve(__dirname, 'node_modules/modified-package')
    }
  }
}
```
**作用**：绕过构建工具缓存机制

---

### 五、文件监听增强方案
```js
// 使用 chokidar 监听 node_modules 变化
npm install chokidar --save-dev

// watch.js
const chokidar = require('chokidar')
chokidar.watch('node_modules/modified-package').on('change', () => {
  execSync('npm run restart-server')
})
```
**运行**：`node watch.js` 开启实时监控

---

### 六、Docker 层缓存突破
```dockerfile
# Dockerfile 策略
RUN npm install

# 在安装后执行修改
RUN patch -p1 < /app/patches/package-name+version.patch

# 强制重建该层
docker build --no-cache .
```
**适用场景**：容器化部署环境

---

### 七、源码直连方案（终极）
```json
// package.json
{
  "dependencies": {
    "modified-package": "git://github.com/yourname/package-fork.git#commit-hash"
  }
}
```
**操作流程**：  
1. Fork 原仓库  
2. 提交修改  
3. 通过 Git URL 直接引用

---

### 缓存清理全攻略
| 构建工具       | 缓存路径                              | 清理命令                      |
|----------------|-------------------------------------|-----------------------------|
| Webpack        | node_modules/.cache/                | `npx webpack --clear-cache` |
| Vite           | node_modules/.vite                  | `rm -rf .vite`              |
| Babel          | node_modules/.babel-cache/          | `npx babel --delete-cache`  |
| Jest           | node_modules/.jest-cache            | `npx jest --clearCache`     |

---

### 安全升级策略
```bash
# 检查补丁兼容性
npx npm-check-updates -p modified-package

# 交互式升级
npx npm-check-updates -i
```

---

### 最佳实践流程
1. **紧急修复**：使用 `patch-package` 生成补丁
2. **长期维护**：Fork仓库并建立同步机制
3. **团队协作**：将 `/patches` 目录加入 Git
4. **CI/CD集成**：在流水线中添加 `postinstall` 阶段

---

### 性能对比数据
| 方案               | 生效速度 | 维护成本 | 团队协作 |
|--------------------|----------|----------|----------|
| 直接修改           | ⚡️ 0.5s  | 🔴 高     | ❌ 差     |
| patch-package      | 🚀 2s    | 🟢 低     | ✅ 优     |
| npm link           | ⏳ 5s    | 🟠 中     | 🟡 中     |
| Git源码引用        | 🐢 30s   | 🟢 低     | ✅ 优     |

---

### 高级调试技巧
```js
// 在修改的模块中添加调试标识
if (process.env.NODE_ENV === 'development') {
  console.log('[MODIFIED] 当前使用定制版本 v1.2.3')
}

// 使用 require 缓存清除
Object.keys(require.cache).forEach(id => {
  if (/modified-package/.test(id)) {
    delete require.cache[id]
  }
})
```

---

### 法律风险提示
1. 遵守第三方库的 LICENSE 协议
2. 重大修改需保留原始版权声明
3. 优先向原仓库提交 PR
4. 商业项目注意 AGPL 等传染性协议

根据项目阶段选择方案：开发期推荐 `patch-package` + 文件监听，生产环境建议使用 Git 源码引用或私有仓库发布定制版本。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值