npm包版本过低，如何打补丁一.在支付宝小程序中，页面index.但在实际编译后，页面未正常展示，并且查看编译文件ind

一.背景

在支付宝小程序中，页面index.vue需要用到 join-group-chat 加入群聊 和 lifestyle 关注生活号开放组件

在这里插入图片描述
但在实际编译后，页面未正常展示，并且查看编译文件index.axml，结果发现两个问题：

问题1：lifestyle标签 sceneId属性丢失
问题2：不支持join-group-chat标签

二. 解决办法

方法1：版本升级

方法2：打补丁

查看npm包@tarojs，发现关联依赖为@tarojs/plugin-platform-alipay，通过源码分析后，只需要修改 node_modules/@tarojs/plugin-platform-alipay/dist/index.js 中代码即可解决。

const components = {
	...
    Lifestyle: {
        'scene-id': '', //增加此属性
        ...
    },
    JoinGroupChat:{ //增加此对象
        templateId: ''
    },
   	...
};

在这里插入图片描述

但是这样的话，项目每次npm install，都会被覆盖，这时候就需要打补丁。

如何打补丁

a. 修改 npm 包
b. 安装 patch-package

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

npm i patch-package --save-dev

c. 生成补丁

npx patch-package npm包名

运行结果如下

在这里插入图片描述

会在根目录生成patches文件夹

在这里插入图片描述

d. 在package.json的script中添加如下字段及内容
npm scripts 使用指南

// postinstall 是 npm在安装执行的过程提供了一些生命周期钩子。
// 在安装依赖完成后，npm可以执行postinstall钩子
{
    "postinstall": "patch-package"
}

e. 测试，重新npm i

在这里插入图片描述