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文件是否依然存在
如果不存在，且程序运行正常，即表明重新引入的文件已经生效
如果存在，即表明重新引入的文件没有生效
步骤五：使用第二种方法可能会导致依赖包太大，给项目的运行带来负担
只需要拷贝主目录文件下的压缩文件
在模块中按路径引入压缩文件，按步骤三注册使用即可
网友评论