为什么需要修改npm包

有些时候我们在使用第三方npm包的过程中可能会遇到以下一些问题：

• npm存在缺陷/bug，包本身没有新版本解决该问题
• npm存在缺陷/bug，新版本解决但本地依赖版本过低，不好直接升级
• 所需功能过于个性化，不具备通用性，npm维护者过滤此功能
• …

就像最近小程序用户隐私保护开发来的很突然，恰好戳中了很多组件库的软肋。

而作者使用的tdesign组件库本身并没有这一功能属性。在观望一段时间后并没有等来官方/社区的更新后，作者决定不能再等了。

我们要改成什么样子

以tdesign组件库中的button为例，我们需要扩展该组件具备id属性和bindagreeprivacyauthorization事件回调。以达到如下效果

<button id="agree-button" bind:bindagreeprivacyauthorization="handleAgreePrivacyAuthorizationEvent"></button>

喜闻乐见环节

安装patch-package

npm i patch-package --save-dev

修改代码

详细请参考 tdesign-miniprogram #2320

对我们而言，我们需要进去node_modules内找到该npm包修改以下内容

• node_modules/tdesign-miniprogram/miniprogram_dist/button/type.ts

    /**按钮id */
    buttonId?: {
      type: StringConstructor;
      value?: string;
    };
    openType?: {
      type: StringConstructor;
      value?:
        | 'contact'
        | 'share'
        | 'getPhoneNumber'
        | 'getUserInfo'
        | 'launchApp'
        | 'openSetting'
        | 'feedback'
        | 'chooseAvatar'
        | 'agreePrivacyAuthorization';
    };

• node_modules/tdesign-miniprogram/miniprogram_dist/button/props.ts

   /**按钮id */
  buttonId: {
    type: String,
  }

• node_modules/tdesign-miniprogram/miniprogram_dist/button/button.wxml

<button
  id="{{buttonId}}"
  bind:agreeprivacyauthorization="agreeprivacyauthorization"
  ></button>

• node_modules/tdesign-miniprogram/miniprogram_dist/button/button.ts

agreeprivacyauthorization(e) {
   this.triggerEvent('agreeprivacyauthorization', e.detail);
},

最后因为button会做透传组件被其它组件依赖使用，还需要修改其中template。如下

• node_modules/tdesign-miniprogram/miniprogram_dist/common/template/button.wxml

<t-button
    button-id="{{buttonId}}"
  >
</t-button>

构建小程序npm

此步骤可省略，通过微信开发者工具 工具 - 构建npm 可生成修改后的 miniprogram_npm 此时本地已经生效。

但我们需要的是对npm修改完打上补丁，在其它队友那、在别的设备上clone代码后都可以直接运行。

patch

回到项目根目录（即package.json同级目录下），运行

npx patch-package tdesign-miniprogram

等待片刻后，会发现项目生成一个文件 patches/tdesign-miniprogram+1.0.3.patch， 我们将该文件上传至git仓库。在其它设备上拉取该文件后，重新执行npm install操作和工具 - 构建npm 发现该依赖补丁已经可以正常使用。

❓

大家平时遇到这种情况，都怎么解决呢？ 还有别的更好的方案么，欢迎评论区留言~~