优雅地修改node_modules 中的依赖包

npm install可以帮助我们安装很多有用的依赖包

这些依赖包都在根目录的 node_modules 文件中

一般情况下我们不会去修改 node_modules 依赖包中的源码

但凡事总有例外

今天我就教大家如何优雅、简单地修改依赖包中的源码

把别人的代码，变成自己的代码

总结了两种方法

方法一：

步骤一、通过命令安装  patch-package

执行：npm install patch-package --save-dev

步骤二、修改项目根目录下的 package.json 文件

在 package.json 文件中的 scripts 中加入 "postinstall": "patch-package"

步骤三、手动修改 node_modules 依赖包中的源码

    例如，我修改的是topology-vue这个依赖包中的源码，文件在

    node_modules/topogu-vue/topology-vue.umd.js

    node_modules/topogu-vue/topology-vue.css

   【为什么修改topology-vue.umd.js文件中的代码，项目才会生效呢？打开node_modules/topogu-vue/package.json文件找到main,发现该模块对      应的主文件是"main": "topology-vue.umd.js"】

   我在topology-vue.umd.js文件中执行了：console.log('此文件被执行了吗？')这一行代码

步骤四、手动执行命令创建 npx patch-package package-name 补丁文件

执行命令：npx patch-package package-name，其中package-name指的是被修改的依赖包的名字（不是被修改的文件的名字）

例如，我要修改的是node_modules中topology-vue这个依赖

首先，我在package.json文件中找dependencies，在依赖中可以发现我安装了topology-vue

其次，执行命令：npx patch-package topology-vue

最后，项目根目录中会自动创建一个 patches 文件夹，并且该文件夹中出现一个 package-name+version.patch 的补丁文件，并发现该补丁文件下有console.log('此文件被执行了吗？')这一行代码

步骤五、测试补丁文件是否可以生效

手动删除项目中的 node_modules 文件，并重新执行 npm install 命令安装 node_modules 依赖包

安装成功后查看之前修改的 node_modules 依赖包中的文件，查看修改的代码是否依然存在

如果之前修改的代码依然存在，即表明补丁文件已经生效

如果之前修改的代码不存在，即表明补丁文件没有生效

方法二：

步骤一：将node_modules 依赖包中的vue文件和要修改的依赖包同时拷贝存放在一个新的文件夹中

例如，我要修改topology-vue的源码

将node_modules 依赖包中的vue和topology-vue文件同时拷贝存放到一个新的文件夹new_node_modules中

步骤二：将new_node_modules文件夹存放在根目录下的static文件中

步骤三：在模板组件中按路径引入、注册

步骤四：测试拷贝出的源码是否生效

手动删除项目中的 node_modules 文件

手动删除package.json文件中dependencies下的topology-vue依赖

并重新执行 npm install 命令安装 node_modules 依赖包

安装成功后查看 node_modules 依赖包中的topology-vue文件是否依然存在

如果不存在，且程序运行正常，即表明重新引入的文件已经生效

如果存在，即表明重新引入的文件没有生效

步骤五：使用第二种方法可能会导致依赖包太大，给项目的运行带来负担

只需要拷贝主目录文件下的压缩文件

在模块中按路径引入压缩文件，按步骤三注册使用即可