如何优雅的修改node_modules依赖源码

歆一
3,855 阅读2分钟

背景

前端项目开发中会遇到一些npm依赖包中一些漏洞，有些三方项目作者已不再维护。或者实际业务场景需要定制化三方依赖。此时便需要我们修改node_modules中源码。

解决方案

使用patch-package创建并保留对 npm 依赖项的修复 。

如何使用

  1. 安装 patch-package （本案例使用@6.4.7版本，建议版本号保持一致，以免出现其他错误）
npm i patch-package
  1. 修改node_modules源码
  1. 创建补丁（ npm > 5.2 ）
npx patch-package package-name

package-name 为node_modules下修改过源码的文件夹名。

此文件夹根目录下需包含package.json

如下图，更改了es6下的renderer.js源码则执行命令为

npx patch-package @prerenderer/renderer-puppeteer

图示1.png

此时根目录下会生成包含变更代码的文件夹patches

图示2.png

打开文件便能看到代码变更记录

图示3.png

原理：patch-package会将当前node_modules下的源码与原始源码进行git diff ， 并在项目根目录下生成一个patch补丁文件

  1. 添加自动执行命令

到此补丁已经生成完毕，我们需要让其他人拉取此项目，以及线上部署时候也能也能执行此补丁任务

在项目 package.json 中的scripts中加入命令

  "scripts": {
    ...
    "build": "patch-package && node build/build.js",
    "prepare": "patch-package"
  },

其中prepare用来在npm install 后执行补丁，

因jenkins自动构建中不允许npm install前后指定对node_modules的修改，所以在build

命令前也加上patch-package保证构建打包时候也能执行到此补丁（未使用jenkins自动构建可忽略）

  1. 测试 删除本地的node_modules再执行`npm install 找到要修改的源码，发现此时代码已经变更为修改后的代码。

更新补丁

同创建补丁一致。

更新补丁时jenkins自动部署可能会失败

报错示例：**ERROR** Failed to apply patch for package @prerenderer/renderer-puppeteer at path

原因：自动构建前未清除上一版补丁

解决：在构建命令npm install && npm run build前加上如下代码

rm -rf node_modules
rm package-lock.json
npm cache clear --force
​
npm install && npm run build
...

(建议补丁更新自动构建删除此命令，以免影响后续构建速度)

avatar
文章
阅读
粉丝