如何修改 node_modules 里的文件

本文主要是介绍如何修改 node_modules 里的文件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在我们的日常开发中，有时候使用npm上的包，发现有bug，看过源码后我们知道如何修改，但是别人可能一时半会没法更新，这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢？首先，直接修改node_modules里面的文件是不太行的，重新安装依赖就没有了。一般常用办法有两个：

1、下载别人代码到本地，放在src目录，修改后手动引入

2、fork别人的代码到自己仓库，修改后，从自己仓库安装这个插件

这两个办法的缺陷就是：更新麻烦，我们每次都需要手动去更新代码，无法与插件同步更新，为了解决这个问题，这里有两个比较投机的办法，可以解决。

一、webpack alias配置路径别名

1、webpack alias替换“简写路径”对node_modules里面的文件也是生效的，这时候我们可以将别人源码里面引用模块的路径替换成我们自己的文件，具体操作如下：

A、找到别人源码里面需要修改的模块，复制代码到src目录

B、修改其中的bug，注意里面引用其它文件都需要改成绝对路径

C、找到这个模块被引入的路径（我们需要在webpack alias拦截的路径）

D、配置webpack alias

接下来以qiankun框架的patchers模块修改配置为例：

文件被引用的路径为./patchers（需配置的拦截路径）：

该文件内容为：

复制该文件内容到src/assets/patchers.js，修改其import路径为绝对路径，并添加我们的代码：

配置webpack alias（以vue-cli3为例，配置文件为vue.config.js）：

const path = require('path');
module.exports = {
　　chainWebpack: config => {
　　　　config.resolve.alias.set('./patchers',path.resolve(__dirname,'src/assets/patchers.js'))
　　}
}

运行代码，控制台打印成功，表明我们已经成功覆盖别人的代码，而且别人的代码有更新时，我们也可以同步更新，只是这个模块的代码使用我们自定义的，打包之后也是可以的。

二、使用patch-package插件来修改

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

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

"script": {
　　"postinstall": "patch-package"
}

3、修改node_modules里面的代码

4、执行命令：npx patch-package qiankun

第一次使用patch-package会在项目根目录生成patches文件夹，里面有修改过的文件diff记录

当这个包版本更新后，执行命令：git apply \--ignore-whitespace patches/qiankun+2.0.11.patch即可，其中qiankun+2.0.11.patch是它生成的文件名。

这篇关于如何修改 node_modules 里的文件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！