使用pnpm给第三方包打补丁

以修改 vue-echarts包为例

1、在node_modules中查看该包实际安装的版本,假设为6.1.0版本
2、在package.json中锁定该版本

"vue-echarts": "6.1.0",

3、先删除项目中的node_modules包
安装或升级pnpm不小于7.4.0版本

npm install -g pnpm

4、运行 pnpm patch <pkg name>@<version>

 pnpm patch vue-echarts@6.1.0

该命令将导致一个包被提取到一个可以随意编辑的临时目录中。
5、在该临时目录中修改三方的包
完成更改后，运行pnpm patch-commit <path>（path为临时目录地址）以生成补丁文件并通过该字段<path>将其注册到您的顶级清单中
运行后会在顶级目录
①、package.json中出现

  "pnpm": {
    "patchedDependencies": {
      "vue-echarts@6.1.0": "patches/vue-echarts@6.1.0.patch"
    }
  }

②、多了一个patches目录

image.png

6、重新安装依赖pnpm i
会发现node_modules中对应的vue-echarts包相应的内容已经被更改

使用vue-echarts遇到的一个坑

vue-echarts 6.1.0版本使用图表配置autoresize=true时，在监控软件上会报ResizeObserver loop limit exceeded，查看源码发现是因为useAutoresize中throttle使用了防抖，造成图表的resize过于频繁的进行了更改。

    function useAutoresize(chart, autoresize, root) {
        var resizeListener = null;
        vueDemi.watch([root, chart, autoresize], function (_a, _, cleanup) {
            var root = _a[0], chart = _a[1], autoresize = _a[2];
            if (root && chart && autoresize) {
                resizeListener = core.throttle(function () {
                    chart.resize();
                }, 100);
                addListener(root, resizeListener);
            }
            cleanup(function () {
                if (resizeListener && root) {
                    removeListener(root, resizeListener);
                }
            });
        });
    }

修改为

    function useAutoresize(chart, autoresize, root) {
        var resizeListener = null;
        vueDemi.watch([root, chart, autoresize], function (_a, _, cleanup) {
            var root = _a[0], chart = _a[1], autoresize = _a[2];
            if (root && chart && autoresize) {
                resizeListener = core.throttle(function () {
                    chart.resize();
               }, 300，true);//1、加入true 让throttle用节流控制的方式运行，2、增加时间间隔变为300ms
                addListener(root, resizeListener);
            }
            cleanup(function () {
                if (resizeListener && root) {
                    removeListener(root, resizeListener);
                }
            });
        });
    }

参考

pnpm:https://pnpm.io/cli/patch