如何修改 node_modules 里的文件

2022-07-13 17:00:20 阅读：194 来源： 互联网

标签：node package 代码路径 modules patch 修改 alias

在我们的日常开发中，有时候使用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,package,代码,路径,modules,patch,修改,alias
来源： https://www.cnblogs.com/coolsboy/p/16474415.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

如何修改 node_modules 里的文件