-
2021-09-15 11:45:23
一、应用场景
1、某些依赖有些bug,并且无人维护,需要自己修复。
2、某些依赖低版本有些bug,但是因为项目原因无法升级高版本依赖,需要自己手动修复。
3、上线过程中发现某些依赖有些bug,需要紧急修复。
二、修改方式
1、直接修改node_modules中的内容(不推荐)
优点:方便,找到需要修改的内容直接改就完事了。
缺点:重新拉取依赖就会被覆盖,还需要重新修改。
2、把需要修改的内容复制到项目中,修改导入地址为项目地址(一般推荐)
优点:重新拉取依赖不需要重新修改。
缺点:未来依赖升级,还需要手动替换所有导入位置为依赖位置。
3、通过patch-package修改(推荐)
优点:重新拉取依赖会通过判断依赖版本,版本一致才会自动修改内容。
缺点:操作步骤比较繁琐。
使用方法:
1、安装依赖 npm i patch-package --save-dev 2、在package.json文件中的scripts属性中增加脚本 "postinstall": "patch-package" 3、修改node_modules中的内容 4、创建补丁 npx patch-package package-name(刚才修改的包名)
坑:
1、自动部署中不生效 报错信息 npm WARN lifecycle nuxt-base-pc@1.0.0~postinstall: cannot run in wd nuxt-base-pc@1.0.0 patch-package (wd=/data/servers/jenkins/workspace/nginx) 解决办法 在项目根目录添加.npmrc 文件,写入: unsafe-perm = true
更多相关内容 -
详解如何修改 node_modules 里的文件
2020-11-20 17:36:00首先,直接修改node_modules里面的文件是不太行的,重新安装依赖就没有了。一般常用办法有两个: 下载别人代码到本地,放在src目录,修改后手动引入。 fork别人的代码到自己仓库,修改后,从自己仓库安装这个插件... -
npm-buildpack:从缓存安装或构建 node_modules
2021-06-28 07:33:04从缓存安装或构建 node_modules npm install -g npm-buildpack 用法 安装后转到节点应用程序并运行 npm-buildpack 该脚本将做以下事情 如果已经有 node_modules 文件夹,只需运行npm rebuild 如果不是,将使用... -
如何修改 node_modules 里的文件
2020-06-01 16:14:44“ 关注 前端开发社区 ,回复 ‘领取资料’,免费领取Vue,...首先,直接修改node_modules里面的文件是不太行的,重新安装依赖就没有了。 一般常用办法有两个: 下载别人代码到本地,放在src目录,修改后手动引入。 f“ 关注
前端开发社区
,回复 ‘领取资料
’,免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步前言
有时候使用
npm
上的包,发现有bug
,我们知道如何修改,但是别人可能一时半会没法更新,或者是我们特殊需求,别人不愿意修改,这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢?首先,直接修改node_modules
里面的文件是不太行的,重新安装依赖就没有了。一般常用办法有两个:
- 下载别人代码到本地,放在src目录,修改后手动引入。
fork
别人的代码到自己仓库,修改后,从自己仓库安装这个插件。
这两个办法的缺陷就是:更新麻烦,我们每次都需要手动去更新代码,无法与插件同步更新。如果我们要修改的代码仅仅是别人的一个小模块,其他大部分代码都不动,这时候有一个很投机的操作:利用
webpack alias
来覆盖别人代码。webpack alias 的作用
webpack alias
一般用来配置路径别名,使我们可以少写路径代码:chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) .set('#', resolve('src/views/page1')) .set('&', resolve('src/views/page2')); },
也就是说,
webpack alias
会替换我们写的“简写路径
”,并且它对node_modules
里面的文件也是生效的。这时候我们可以将别人源码里面引用模块的路径替换成我们自己的文件。具体操作如下:
- 找到别人源码里面的需要修改的模块,复制代码到src目录
- 修改其中的bug,注意里面引用其他的文件都需要写成绝对路径
- 找到这个模块被引入的路径(我们需要拦截的路径)
- 配置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
来修改
经掘友 @Leemagination 指点,使用patch-package
来修改node_modules
里面的文件更方便步骤也很简单:
- 安装patch-package:npm i patch-package --save-dev
- 修改package.json,新增命令postinstall:
"scripts": { + "postinstall": "patch-package" }
- 修改node_modules里面的代码
- 执行命令:npx patch-package qiankun。
第一次使用
patch-package
会在项目根目录生成patches
文件夹,里面有修改过的文件diff
记录。
当这个包版本更新后,执行命令:
git apply --ignore-whitespace
patches/qiankun+2.0.11.patch
即可。其中qiankun+2.0.11.patch
是它生成的文件名。结尾
这个办法虽然投机,也有很多局限性,但是也很好用,技术就是需要不断的探索。有什么问题或者错误,欢迎指出!
往期
收藏吧 || ES6 方法,用来解决实际开发的JS问题(二)
请各位帅哥美女多多支持帅编,回复“
加群
”即可领取 前端干货
-
对node_modules 中修改的内容进行补丁修复
2021-10-31 16:28:56node_modules中的源码有bug,项目有着急上线时,可以使用patch-package对node_modules中的内容进行补丁修复,这样团队其他人也不用再修改一次node_modules中的内容了,直接install安装就可以 使用方法:掘金...node_modules中的源码有bug,项目又着急上线时,可以使用patch-package对node_modules中的内容进行补丁修复,这样团队其他人也不用再修改一次node_modules中的内容了,直接install安装就可以
-
手动修改node_modules 中的依赖包 并且npm i 时不用再次手动修改node_modules
2020-11-18 12:11:01难免有些情况是需要修改node_modules中的包的,直接放解决办法 第一步、安装patch-package npm install patch-package --save-dev 第二步、在 package.json 文件中的 scripts 中加入 “postinstall”: “patch-...难免有些情况是需要修改node_modules中的包的,直接放解决办法
第一步、安装patch-package
npm install patch-package --save-dev
第二步、在 package.json 文件中的 scripts 中加入 “postinstall”: “patch-package”,这里必须手动加入。
"postinstall": "patch-package"
第三步、修改需要修改的node_modules中的包,例如:
第四步、手动执行命令创建 npx patch-package package-name 补丁文件,这里的 package-name 是指的修改的包对应的安装时的包名, 可以在package.json中找对应的包名,例如:
npx patch-package lib-flexible // 而不是我修改的flexible .js文件
执行了上述命令之后,项目中就会自动生成一个patches文件夹说明成功了,例如:
提交推送代码就可以了,下次拉代码直接npm i 不用再次手动修改node_modules就可以了。 -
修改 node_modules 里文件的正确姿势
2021-04-12 22:40:30那么这个时候我们就要去修改 node_modules 里面的源码,直接修改会导致两个问题: 第一,更新问题,重新安装之后,修改的文件会被覆盖 第二,同步问题,node_modules 里的文件一般是不提交到代码库的,那如何让团队... -
修改 node_modules 中扩展包的源码
2021-08-20 17:08:00从 github 中下载代码到自己本地 在这个扩展包的 package.json 文件中,修改一下代码。(可能不同的包会不一样,这点我也不是很清楚)"main": "./dist/index.min.js", "module": "./dist/index.min.js" // 将上面两... -
如何将项目里node_modules的更改保存起来
2021-10-08 12:53:39在前端项目开发中,我们经常会遇到node_modules里的...patch-packagehttps://www.npmjs.com/package/patch-package这个包可以在npm install后按照项目里保存的更改自动修改node_modules,非常好用 使用步骤: 一.安装 -
node_modules 困境
2020-05-07 08:38:00本文已经过原作者 杨健 转载授权,原文请点击阅读全文查看。Ryan 对于 node.js 的十大遗憾之一就是支持了 node_modules,node_modules 的设计虽然能满足大... -
为什么有了node_modules,还需要再发明一个uni_modules的轮子?node_modules和uni_modules的区别
2022-05-17 11:28:42uniapp的uni_modules目录需要提交到Git吗?为什么有了node_modules,还需要再发明一个uni_modules的轮子?node_modules和uni_modules的区别 -
认识node_modules
2020-03-05 14:25:231.认识node_modules js 前端语言 运行在浏览器 浏览器的js 没有读写文件的功能 input:type=file 可以选中自己本地的资源 Node.js:js在服务器运行(基于Node运行),能够对服务器文件进行操作读写 把Node安装再来... -
修改node_modules下源码并重新发布npm包
2020-12-02 13:39:07修改node_modules下源码(详细) 开发中遇到需要修改装包的源码,直接在node_modules修改是无效的,不同的开发环境重新装包就没有了。将文件放到src目录下太暴力,还会有路径无效的问题,所以可以使用github fork源码... -
2021-11-02 修改 node_modules的文件
2021-11-02 18:07:28如何修改 node_modules 里的文件 如何修改 node_modules 里的文件 patch-package打补丁踩坑 报 Error: spawn git ENOENT错误的解决方法: 在gitbash中执行该命令 GitHub教程 Git Bash详细教程 -
比较临时的修改node_modules内包的源码并编译引用 修改依赖包
2021-05-28 17:06:11开发时的一个测试用需求,所以只是在本地修改了node_modules里某个包的源码。只限本地 git clone 包到node_modules里 修改源码 重新编译包 npm install -s + npm run build 在整个项目的目录下package.json手动向... -
如何科学修改 node_modules 里的文件
2020-08-27 08:42:23作者:沉末_原文:https://juejin.im/post/5d25b39bf265da1bb67a4176前言有时候使用npm上的包,发现有bug,我们知道如何修改,但是别人可能一... -
手动修改 node_modules 中的依赖包(patch-package)
2021-10-18 09:17:14但是显示签章的修改代码在依赖包node_modules路径下,毕竟修改在node_modules下的文件每次npm install都需要手动修改。瞬间我就开始难受了,难受难归难受但还是要想办法解决滴 [外链图片转存失败,源站可能有防盗链... -
修改node_modules的包
2022-01-03 13:09:16首先,直接修改node_modules里面的文件是不太行的,重新安装依赖就没有了。 一般常用办法有两个: 下载别人代码到本地,放在src目录,修改后手动引入。 fork别人的代码到自己仓库,修改后,从自己仓库安装这个... -
基于webpack修改插件源码,使用自定义文件替换node_modules里面的源码文件
2020-10-26 17:36:52基于webpack修改插件源码,使用自定义文件替换node_modules里面的源码文件 需求:插件不满足要求,需要修改源码,但又想永远保留自己修改的这份,不想被重新下载的覆盖 方法:在运行时执行你替换的方法,将你... -
jekins 前端更换node_modules插件
2020-03-11 14:35:11jekins安装完node_modules插件包后,后续更改package文件夹的时候(需重新安装) 1.第一种解决方案就是 点击wipe out 然后 build一下就好(如果不行看一下build文件夹是不是完整 (别缺少cnpm i -v)) 2、第二种... -
【Umi/Ant Design Pro】调试node_modules
2022-04-12 15:43:49umi 默认情况下会使用msfu,进行预编译,提高加载速度,但是这样会导致在node_modules做的修改,无法通过热更新获得实时的改动。 如果使用Ant Design Pro框架,那么就需要在config.ts中把配置项 mfsu: {} 去掉。 ... -
nodejs 更新本地 node_modules
2016-02-04 08:02:00这个只能更新 node_modules 到 package.json 中配置的版本.所以如果想更新到最新版的话,可以手动修改 package.json 中的版本号到 npm outdated 列出的最新版... (如果有更好的方法,请告知,谢谢...) ... -
如何修改项目加载包默认的node_modules路径
2017-04-27 20:40:13修改项目默认node_modules路径 NODE_PATH 是干什么的呢? 操作系统中都会有一个PATH环境变量,想必大家都知道,当系统调用一个命令的时候,就会在PATH变量中注册的路径中寻找,如果注册的路径中有就调用,否则就提示... -
node_modules中依赖的版本更新
2020-08-07 14:05:17描述:在运行项目的时候,老是会遇到依赖版本的问题,就想着能不能看到都...用npm安装并使用,这样就会出现本地依赖和你package.json中的依赖的比对状态,哪些没装,哪些需要更新。 npm install npm-check -g n... -
修改 node_modules第三方依赖
2020-09-11 15:08:11首先,直接修改node_modules里面的文件是不太行的,重新安装依赖就没有了。一般常用办法有两个: 下载别人代码到本地,放在src目录,修改后手动引入。 fork别人的代码到自己仓库,修改后,从自己仓库安装这个插件。...