【 非常实用】如何优雅地解决npm依赖 bug

悟饭小达人
1,553 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

引言

试想这样一种场景：当我们遇到 npm 依赖的bug，并且在本地 node_modules 中进行修复了，然后一个依赖更新（npm i 或者 yarn等等）就把 node_modules 里面的更改覆盖了。同时，因为修改是本地的，我们没有办法很便捷地在团队中进行共享（通常是每个人都在本地进行修改...）

痛苦.png

本文介绍的 patch-package 这个开源项目就是解决上面的问题，它有以下的特点：

  • 持久化更改到本地
  • 通过执行简单的命令就能同步更改

给你的依赖打上一个补丁

话不多说，直接上代码。

1. 初始化项目

首先初始化一个项目，这里用 create-react-app 来生成一个 React 项目。

npx create-react-app my-app

2. 安装依赖与添加脚本命令

首先安装依赖：

yarn add patch-package postinstall-postinstall

细心的朋友可能看到在安装依赖的时候新增了 postinstall-postinstall 这个包，那么这个包是干嘛的呢？继续往下看就能找到答案。

安装依赖后，在 package.json 文件中添加一个脚本命令：

{
    "scripts": {
+       "postinstall": "patch-package"
    }
}

我们知道 postinstall 钩子会在 yarn、yarn install 或者 yarn add 命令之后触发，目的是在依赖更新后将补丁打进依赖。而依赖更新还有另外一个操作：yarn remove，postinstall-postinstall 这个包就是保证执行 yarn remove 后也能触发 postinstall 的执行。

3. 修改依赖

这里以修改 node_modules/react/index.js 这个依赖文件为例，在里面添加一条 console.log 语句：

'use strict';

+ console.log('hello world')

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

4. 生成补丁

生成补丁的命令是：

yarn patch-package package-name

上面的 package-name 就是我们修改的依赖包名，在这个例子中为 react。执行 yarn patch-package react 后可以看到根目录新增了一个 patches 目录。

image.png

patches 目录下的文件就是记录 node_modules 中的变更操作，因此我们可以将补丁文件上传到 git 仓库，团队其他开发者拉取代码后，只需要执行 patch-package 命令就能同步给 node_modules 打上补丁。

开心.png

总结

我们会在更多的场景使用到 patch-package，比如当我们给开源项目提了一个 PR，但是 PR 尚未被接收，或者已经接收了但还没有发包，在发包之前我们也可以通过 patch-pakcage 的方式来进行开发。

本文对 patch-package 的使用场景和流程进行简单的介绍，更详细的 API 或者特性可以访问 patch-package github 查看，如果有说得不正确的欢迎一起在评论区探讨～

avatar
文章
阅读
粉丝