使用 pnpm patch 修改第三方依赖

背景

最近发现公司项目中使用 @fortawesome/vue-fontawesome 第三方依赖后,会导致 Vite 工具打包构建的产物中带有 require 语法

本地开发环境中,启用 node server 服务,Node 环境中有 require 方法,所以本地正常。但是线上部署环境中,是纯浏览器环境,没有 require 方法,导致出现 require is not undefined 的错误,如下图所示

问题原因

经过我的仔细排查,发现在 @fortawesome/vue-fontawesome 的源码中,有这样一段代码

js 复制代码
// node_modules/@fortawesome/vue-fontawesome/index.js
// node_modules/@fortawesome/vue-fontawesome/index.es.js

var svgCorePackageJson = require('@fortawesome/fontawesome-svg-core/package.json');
var SVG_CORE_VERSION = svgCorePackageJson.version;

Vite 工具会将这段代码原封不动打包到构建产物中,导致浏览器环境出现问题

解决思路

因为项目本身使用 pnpm 包管理器,所以选择使用 pnpm patch 修改第三方包,删除导致问题的代码,彻底从源头上解决问题

步骤一

清理旧的 node_module,重新安装所有依赖

shell 复制代码
rm -rf node_modules && pnpm install

步骤二

运行 pnpm patch 命令,它会创建一个临时的、可供你修改的包副本

shell 复制代码
pnpm patch @fortawesome/vue-fontawesome

非常重要: 命令执行后,你会看到类似这样的输出:

shell 复制代码
Changes can be made in a temporary directory. When you're done, run 'pnpm patch-commit /private/var/folders/.../temp-dir-for-patching-...'
Patching @fortawesome/vue-fontawesome@x.y.z
/private/var/folders/.../temp-dir-for-patching-...  <-- **请复制并记住这个临时目录的完整路径!**

请务必复制并保存这个临时目录的完整路径!

步骤三

进入临时目录并修改文件

bash 复制代码
cd /private/var/folders/.../temp-dir-for-patching-... # 将此路径替换为你实际复制的路径

打开第三方依赖的构建产物,修改代码。

js 复制代码
// var svgCorePackageJson = require('@fortawesome/fontawesome-svg-core/package.json');
// var SVG_CORE_VERSION = svgCorePackageJson.version;
var SVG_CORE_VERSION = '7.0.0'; // 或者其他你认为合适的版本号

注意所有有问题的构建产物都要修改

步骤四

提交补丁并生成 .patch 文件,回到项目根目录,执行下面的命令

csharp 复制代码
pnpm patch-commit /private/var/folders/.../temp-dir-for-patching-... # 替换为你的临时目录路径

这一步会在项目的根目录下创建 patches 文件夹和 pnpm-workspace.yaml

pnpm-workspace.yaml 内容如下

步骤五

删除 node_modulespnpm-lock.yaml,然后运行 pnpm install

shell 复制代码
rm -rf node_modules
rm -f pnpm-lock.yaml
pnpm install

步骤六

shell 复制代码
pnpm run build

部署到生产环境,查看是否修复

相关推荐
徐小夕@趣谈前端40 分钟前
如何实现多人协同文档编辑器
javascript·vue.js·设计模式·前端框架·开源·编辑器·github
YCOSA20251 小时前
ISO 雨晨 26200.6588 Windows 11 企业版 LTSC 25H2 自用 edge 140.0.3485.81
前端·windows·edge
小白呀白1 小时前
【uni-app】树形结构数据选择框
前端·javascript·uni-app
吃饺子不吃馅2 小时前
深感一事无成,还是踏踏实实做点东西吧
前端·svg·图形学
90后的晨仔2 小时前
Mac 上配置多个 Gitee 账号的完整教程
前端·后端
少年阿闯~~3 小时前
CSS——实现盒子在页面居中
前端·css·html
开发者小天3 小时前
uniapp中封装底部跳转方法
前端·javascript·uni-app
阿波罗尼亚3 小时前
复杂查询:直接查询/子查询/视图/CTE
java·前端·数据库
武昌库里写JAVA3 小时前
SpringCloud与微服务
vue.js·spring boot·sql·layui·课程设计
正义的大古3 小时前
OpenLayers地图交互 -- 章节九:拖拽框交互详解
前端·vue.js·openlayers