使用 pnpm patch 修改第三方依赖

背景

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

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

问题原因

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

// 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，重新安装所有依赖

rm -rf node_modules && pnpm install

步骤二

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

pnpm patch @fortawesome/vue-fontawesome

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

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-...  <-- **请复制并记住这个临时目录的完整路径！**

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

步骤三

进入临时目录并修改文件

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

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

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

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

步骤四

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

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

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

pnpm-workspace.yaml 内容如下

步骤五

删除 node_modules 和 pnpm-lock.yaml，然后运行 pnpm install

rm -rf node_modules
rm -f pnpm-lock.yaml
pnpm install

步骤六

pnpm run build

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