zoukankan      html  css  js  c++  java
  • 如何为npm包打补丁

    我们在开发中经常遇到,npm包有点小问题或者不符合我们的场景。

    通常的解决方案,是提交一个issue或者PR,等待作者修改,又或者copy源码到本地,修改依赖指向本地。

    这两种方案,都有明显的缺点,不是等待时间太久,就是太过暴力。

    这里推荐一个新的方案:patch-package

    patch-package适用于对npm包简单的修改,它能在不copy源码修改依赖的前提下,将修改记录下来,利用git进行管理,保证修改在组内小伙伴间一致。

    通过npm scripts集成,可以无感的使用,效果不错,成本较低。

    话不多说,上demo:

    0、准备

    首先,当然是安装patch-package,按照文档说明来,装devDependencies就好了

    yarn add patch-package --dev

    1、栗子生成

    这里拿lodash.clonedeep 这个包来做一下实验

    找到cloneDeep函数,增加一行console.log

    2、补丁生成

    然后执行命令生成补丁,格式是这样滴 npx patch-package 【包名】,还有其他复杂参数,参考文档自行选用

    npx patch-package lodash.clonedeep

    如图所示,生成成功了,提示我们说,Created file patches... blabla 

    查看一下目录下的patches文件夹,如下图所示,生成了lodash.clonedeep+4.5.0.patch文件

    文件描述了我们修改了什么,第几行,和git的记录类似。

     3、补丁还原

    补丁生成好了,接下来就是还原,我们首先将lodash.clonedeep包内的修改还原。

    然后,使用 命令还原我们的修改。

     npx patch-package

    执行完后,再查看文件内容,会发现我们的修改已经回来了。

     将代码跑起来,会发现我们的修改确实应用了。

    4、传播与集成

    至此,我们的补丁就打好了,不过好像还少了点什么。

    对,缺了自动化。

    我们通过npm scripts 进行自动化还原,每次构建之前,进行打补丁工作,这样我们的修改就能同步给组内其他小伙伴了。

      "scripts": {
            "serve": "npm-run-all postinstall vue-cli-service serve",
            "build": "npm-run-all postinstall vue-cli-service build"
            "postinstall": "patch-package"
        },

    以上呢,是简略后的scripts,大致思路就是利用npm-run-all 执行postinstall,安装我们的补丁,然后再进行构建。

    使用方法不变,只是增加了打补丁的过程。

     5、注意事项

    (1)patch是锁定版本号的,如果升级了版本,patch内容将会失效,最好在package.json能够锁定版本号。

    (2)魔改一时爽,但是也失去了升级的能力,提issue和PR才是正途。

    (3)patch能够支持多少文件修改,没有具体测试,预感是只能支持少量修改。

  • 相关阅读:
    团队冲刺第四天
    团队冲刺第三天
    团队冲刺第二天
    团队冲刺第一天
    全球疫情地图显示
    团队博客——keep running视频+PPT介绍
    周总结7
    人月神话阅读笔记03
    Java枚举类型的使用,数值的二进制表示
    四则运算器
  • 原文地址:https://www.cnblogs.com/jydeng/p/14120348.html
Copyright © 2011-2022 走看看