webpack 科学修改 node_modules 某个包的部分文件为本地文件

需求总是千变万化，npm 不是万能的，node_modules 里面的文件也是需要维护的。

如果 npm install 安装了某个包，然而这个包里面部分文件不支持你的需求，这时候怎么办？

比如：https://github.com/svg/svgo 此包可以批量处理 svg 文件，但是是 nodejs 运行环境，如何做到在浏览器端运行？如：https://tiny.jijian.link这个浏览器端的图片压缩神器。

方法一

直接修改 node_modules 文件，当然你得记得改了些啥，否则下次 npm install 文件就会被覆盖。

方法二

使用 patch-package 修改，还是不够完美，需要额外安装 patch-package，还需要执行各种命令。

使用方法：

1. 安装 patch-package：npm i patch-package --save-dev

2. 修改 package.json，新增命令 postinstall:

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

3. 修改 node_modules/svgo 里面的代码

4. 执行命令：npx patch-package svgo

命令执行后会生成 patches 文件夹，其中包含修改文件的 diff 信息，作用是以后其他机器 npm install 之后，将修改的文件记录覆盖到才安装的 node_modules 文件。

如：git apply --ignore-whitespace patches/svgo+1.3.2.patch 即可，其中 svgo+1.3.2.patch 是它生成的文件名。

方法三

使用 webpack alias 实现替换文件。此方法仅适用于 webpack 维护的项目。

alias 作用基本都知道，设置路径别名，可使用短路引入文件。

其实 alias 作用不仅于此，还能作用于 node_modules 中的文件。

比如： svgo/lib/svgo/tools.js 中 require('fs') 在浏览器端会导致 fs not found 错误，我们需要修改里面的代码，让其不报错。

方法：

1. 复制 svgo/lib/svgo/tools.js 到项目任意位置，修改里面代码，记住此处项目位置。

2. 修改 webpack 配置。

chainWebpack: config => {  
  config.resolve.alias.set('../lib/svgo/tools', require('path').resolve(__dirname, 'src/svgo/lib/svgo/tools.js'));
  return config;
},

其中 ../lib/svgo/tools 是 svgo 包里面的引用路径，src/svgo/lib/svgo/tools.js 是修改后的文件路径。

总结

三种方法各有春秋，需根据需求选择。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-07-23/webpack-alter-file/

如果您觉得文章不错，可以点击文章中的广告支持一下！