前言有时我们在npm上使用packages，发现bug。我们知道如何修改它们，但其他人可能暂时无法更新它们，或者其他人由于我们的特殊需要而不愿意修改它们。有的时候我们只能自己动手，才能丰衣足食。那么我们应该如何修改别人的源代码呢？首先，直接修改node_modules里面的文件是不行的，重装后依赖就没有了。常用的方法有两种：下载别人的代码到本地，放到src目录下，修改后手动导入。fork别人的代码到自己的仓库，修改后从自己的仓库安装这个插件。这两种方式的缺点是：更新比较麻烦，每次都需要手动更新代码，而且不能和插件同步更新。如果我们要修改的代码只是别人的一个小模块，而其他大部分代码都保持不变，那么就有一个很投机的操作：使用webpackalias来覆盖别人的代码。webpackalias的作用webpackalias一般用于配置路径别名，这样我们可以少写路径代码：chainWebpack:config=>{config.resolve.alias.set('@',resolve('src'))。set('#',resolve('src/views/page1')).set('&',resolve('src/views/page2'));}，也就是说，webpackalias会代替"shorthandpath”我们写的，它对node_modules中的文件也有效。这时候我们可以将别人源码中引用模块的路径替换成自己的文件。具体操作如下：在别人的源码中找到需要修改的模块，将代码复制到src目录下修改bug，注意里面所有对其他文件的引用都需要写成绝对路径找到导入这个模块的路径（我们要拦截的路径）配置我们以qiankun框架的patchers模块为例：引用文件的路径为：./patchers（我们要拦截的路径）.文件内容为：将内容复制到src/assets/patchers.js，并将其导入路径修改为绝对路径，并添加我们的代码：configurewebpackalias（我用的是vue-cli4，配置文件为vue.js）。config.js):constpath=require('path');module.exports={chainWebpack:config=>{config.resolve.alias.set('./patchers',path.resolve(__dirname,'src/assets/patchers.js'))}};运行代码，控制台打印成功，说明我们已经成功覆盖了别人，别人的代码有更新的时候，我们也可以同步更新，但是这个模块的代码用的是我们自定义的。打包后也可以。补充：使用patch-package修改。按照@Leemagination的说法，使用patch-package修改node_modules中的文件更方便。步骤也很简单：安装patch-package:npmipatch-package--save-dev修改包。json，添加命令postinstall:"scripts":{+"postinstall":"patch-package"}3.修改node_modules中的代码4.执行命令：npxpatch-packageqiankun.第一次使用patch-package，会在项目根目录下生成一个patches文件夹，里面有修改过的文件diff记录。更新包版本时，执行命令：gitapply--ignore-whitespacepatches/qiankun+2.0.11.patch。其中qiankun+2.0.11.patch是它生成的文件名。关于这个加载器，我已经在npm上发布了。感兴趣的朋友可以直接调用npminstallasync-catch-loader-D安装研究。它的使用方式与一般加载器相同。记得放在babel-loader后面优先执行。注入的结果继续交给babel进行转义{test:/\.js$/,use:["babel-loader?cacheDirectory=true",'async-catch-loader']}更多细节和源码可以正在查看github，如果这篇文章对你有用，希望你能点个star，非常感谢~
