如何修改node_modules里的文件

使⽤npm上的包，发现有bug，直接修改node_moddules⾥的包⽂件不太好，⽽且别⼈本地的包错误也会导致项⽬报错，可以利⽤ webpackalias 来覆盖别⼈代码

webpack alias⼀般⽤来配置路径别名，使我们可以少写路径代码：

chainWebpack: config => { config.resolve.alias .set('@', resolve('src'))

.set('#', resolve('src/views/page1')) .set('&', resolve('src/views/page2'));}

也就是说，webpack alias会替换我们写的“简写路径”，并且它对node_modules⾥⾯的⽂件也是⽣效的。这时候我们可以将别⼈源码⾥⾯引⽤模块的路径替换成我们⾃⼰的⽂件。具体操作如下：

1. 找到别⼈源码⾥⾯的需要修改的模块，复制代码到src⽬录

2. 修改其中的bug，注意⾥⾯引⽤其他的⽂件都需要写成绝对路径3. 找到这个模块被引⼊的路径（我们需要拦截的路径）4. 配置webpack alias

例如：

以qiankun框架的patchers模块为例：

⽂件被引⽤的路径为：./patchers（我们要拦截的路径）

⽂件内容为：

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

配置webpack alias（我⽤的是vue-cli4，配置⽂件是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来修改

使⽤patch-package来修改node_modules⾥⾯的⽂件更⽅便步骤也很简单：

1. 安装patch-package：npm i patch-package --save-dev2. 修改package.json，新增命令postinstall:

\"scripts\": {

+ \"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是它⽣成的⽂件名。