如何修改 node_modules 里的文件

网站建设4年前发布
46 0 0

20230306012952d2a0dfe235a828211628905ecea82582039b74137,有时候使用npm上的包,发现有bug,我们知道如何修改,但是别人可能一时半会没法更新,或者是我们特殊需求,别人不愿意修改,这时候我们只能自己动手丰衣足食。一般常用办法有两个:
,这两个办法的缺陷就是:更新麻烦,我们每次都需要手动去更新代码,无法与插件同步更新。如果我们要修改的代码仅仅是别人的一个小模块,其他大部分代码都不动,这时候有一个很投机的操作:利用 webpack alias 来覆盖别人代码。
,webpack alias一般用来配置路径别名,使我们可以少写路径代码:,也就是说,webpack alias会替换我们写的“简写路径”,并且它对node_modules里面的文件也是生效的。这时候我们可以将别人源码里面引用模块的路径替换成我们自己的文件。
,具体操作如下:
,以qiankun框架的patchers模块为例:
,20230306012953d6075f4526f9f1b4a7745495e074b8383492b8708,文件被引用的路径为:./patchers(我们要拦截的路径)
,20230306013131179b105369abec1d730907af9f1f6ad3b5299b562,文件内容为:
,2023030601295461a39e5053ea93edaeb8555026757a36065fe7891,复制内容到src/assets/patchers.js,修改其 import 路径为绝对路径,并添加我们的代码:
,202303060129546635b4f39bf5c97a37c6731a9a7fcb53849dff254,配置webpack alias(我用的是vue-cli4,配置文件是vue.config.js):,运行代码,控制台打印成功,表明我们已经成功覆盖别人的代码,而且别人的代码有更新时,我们也可以同步更新,只是这个模块的代码使用我们自定义的。打包之后也是可以的。
,2023030601295489a3e007063dd58ce8d7456e5f49ec85c2f742619,经指点,使用patch-package来修改node_modules里面的文件更方便
,步骤也很简单:
,第一次使用patch-package会在项目根目录生成patches文件夹,里面有修改过的文件diff记录。
,2023030601313278b3c4a35f1bc6cf46a314d28b343a27365603702,当这个包版本更新后,执行命令:git apply \--ignore-whitespace patches/qiankun+2.0.11.patch即可。其中qiankun+2.0.11.patch是它生成的文件名。
,这个办法虽然投机,也有很多局限性,但是也很好用,技术就是需要不断的探索。

© 版权声明

相关文章