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

使用 patch-package 自动修改 项目中node_modules中内容

  • 背景简介:我们在使用第三方依赖包时如果遇到了 bug,通常解决的方式都是绕过这个问题,使用其他方式解决,较为麻烦。或者给作者提个 issue 或者 PR,然后等待作者的修复。等待的时间不可控,此时就可以借助 patch-package 自己动手去修复该 bug,感觉是不是很棒。并且还可以在第三方依赖包上,根据业务需求扩展能力,但是问题在于,每当我们重新拉取项目时,需要重新对应修改,很是麻烦 。

  • patch-package 给开发者提供了通过打“补丁”的方式,使得重新安装依赖包时能够保留之前对第三方依赖包的修改的一种解决方案

    (既:修改一次node_modules文件,使用命令npx patch-package packagename生成对应缓存记录,提交至SVN/Git,后续其他人再次拉取项目,不用重新修改node_modules文件)

    具体步骤如下,当您拉取项目时可能会出现以下三种情况:

    • 情形一:项目拉取时,根目录已存在patches文件夹:拉取新的前端项目,并且根目录下存在patches文件夹时,请直接使用npm install下载对应依赖,并且不需要对上述三个node_modules中的文件进行修改,即可启动项目,正常启动。
      在这里插入图片描述
      此时项目中node_modules对应的文件会被自动更改。

    • 情形二:项目拉取时,根目录未存在patches文件夹

      • 例如:根目录未存在patches时,
        • 1.安装

          • npm i patch-package   //或者
            yarn add patch-package postinstall-postinstall
            
        • 2.修改 package.json

          • "scripts": {
                ***,
              +  "postinstall": "patch-package" 
             }
            
        • 3.修改依赖包源码(即文档上述对node_modules操作的步骤),此处以修改 node_modules\xlsx-style\中的文件为例,生成相应补丁。

          •   执行:npx patch-package xlsx-style 
              输出:
              patch-package 7.0.0
              • Creating temporary folder
              • Installing xlsx-style@0.8.13 with npm
              • Diffing your files with clean files
              ✔ Created file patches/xlsx-style+0.8.13.patch
            
          • 注意:此步骤需要先对node_modules中,需要进行修改的文件,先行修改后,再执行生成相应补丁步骤!否则会出现错误提示
            执行:npx patch-package xlsx-style
            输出:
            patch-package 7.0.0
            • Creating temporary folder
            • Installing xlsx-style@0.8.13 with npm
            • Diffing your files with clean files
            ⁉️  Not creating patch file for package 'xlsx-style'
            ⁉️  There don't appear to be any changes.
            
        • 4.查看根目录下patchesxlsx-style+0.8.13.patch内容是否已生成记录对应更改的文件

        • 5.将新修改/生成的 patches文件夹和package.json中的修改提交至SVN/Git(切记!)

    • 情形三: 项目拉取时,根目录已存在patches文件夹,但需要对node_modules中其他文件进行修改

      • 1.修改对应node_modules中的文件
      • 2.执行情形二中的3、4 步骤
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值