使用 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

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

相关推荐
ST.J4 分钟前
webpack笔记
前端·笔记·webpack
Baklib梅梅23 分钟前
2025 年 8 个最佳网站内容管理系统(CMS)
前端·ruby on rails·前端框架·ruby
IT_陈寒33 分钟前
🔥5个必学的JavaScript性能黑科技:让你的网页速度提升300%!
前端·人工智能·后端
Bling_Bling_137 分钟前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子1 小时前
JS实现丝滑文字滚动
前端·javascript·面试
oil欧哟1 小时前
🧐 我用 Vibe Coding 从 0 到 1 打造 AI 产品,上线一个月效果如何?有什么心得?
前端·产品·vibecoding
霍克itxt点top1 小时前
NestJS 入门到实战 前端必学服务端新趋势无密分享
前端
xiguolangzi1 小时前
1panel web服务部署
前端
摘星编程1 小时前
Cursor Pair Programming:在前端项目里用 AI 快速迭代 UI 组件
前端·人工智能·ui·typescript·前端开发·cursorai
醉方休2 小时前
React Fiber 风格任务调度库
前端·javascript·react.js