node_modules 源码修改及团队版本管理新手踩坑指南

最新推荐文章于 2024-08-02 11:15:40 发布

F_Origin

最新推荐文章于 2024-08-02 11:15:40 发布

阅读量1.2k

点赞数

分类专栏： JvaScript 文章标签： javascript vue.js node.js

本文链接：https://blog.csdn.net/F_Origin/article/details/108589968

版权

JvaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参考文章修改项目中 node_modules 源码

踩坑背景

项目中使用到了 el-select-tree,在重写css 样式时发现不生效，然后就有了修改源码的一系列过程，仅供参考。

诉求

1.支持源码修改
2.支持团队共享修改
3.支持第三方库版本更新

已踩1，2的坑，第3个直接搬运。

实现分析

结合网上的例子，大致有两种

1.webpack 拦截路径，然后修改（较为繁琐，不考虑）
2.结合patch-package 进行修改（过程简单，无副作用）
本文主要采用第2种方案

过程

1.分析（以el-select-tree为例）

项目中，实际使用的是生产包
在这里插入图片描述
因此，最佳方式是将第三方库项目clone到本地，然后修改代码，再build，最后替换node_modules中的代码。也可直接修改node_modules中的代码。
做完这些后再用patch-package追踪改动。

2.实现步骤

1.参考分析修改el-select-tree的代码(build 替换或者直接修改)
2.使用patch-package

//1.项目中package.json
 "scripts": {
	+  "postinstall": "patch-package"
 }
 
//2.安装patch-package
npm i patch-package -D

//3.执行npx patch-package package-name 生成跟踪文件
npx patch-package el-select-tree
//4.提交追踪文件到项目供小伙伴使用
git add .
git commit -m 'update'
git push

3.查看生成的追踪文件
在这里插入图片描述
4.重新安装el-select-tree

npm uninstall el-select-tree
npm install el-select-tree

重新安装后，发现修改的源码失效了
在这里插入图片描述
5.重点步骤
执行

npm run postinstall

在这里插入图片描述
源码修改被重新加上了。

6.如果有版本更新，参考github官方文档patch-package

git apply --ignore-whitespace patches/package-name+0.44.2.patch

3.总结

patch-package可以方便的实现源码修改追踪，利于团队协作。
小伙伴们要注意重装或者第一次拉代码时，安装好后记得运行下

npm run postinstall

4.常见报错解决

1.error: Error: spawnSync git ENOBUFS

参考GitHub issue error: Error: spawnSync git ENOBUFS

通过配置maxBuffer 解决，例子如下

//⁨node_modules⁩/patch-package⁩/dist⁩/makePatch.js line 108, specifically in this code:

return spawnSafe_1.spawnSafeSync("git", args, {
                cwd: tmpRepo.name,
                env: { HOME: tmpRepo.name },
                maxBuffer: 1024 * 1024 * 100 //按需要扩大，这里是100Mb
            });