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