28.2023年04月12日.md
今天同事遇到一个问题,react的一个依赖包中出现了敏感性的网址,react-toolkit 这个工具包中引用了immer.js,里面有一个error.ts文件,倒数第几行,会在异常中打印github的地址。这个在公司的代码安全检查中是过不去的,需要剔除掉。
# 解决办法:
可以使用npm patch,但是需要自己去创建和编写git diff的代码,相对来说有点麻烦,但是可以使用patch-package
来简化操作。
- 安装
npm install -D patch-package
- 修改node_modules中某个依赖包的源代码,记住它的package.json引入的模块方式,找到正确的文件。
- 执行生成补丁包的命令
npx patch-package immer
,它会创建一个目录patches
,将生成的补丁包文件放进去immer+9.0.21.patch
- 给你的项目中的package.json文件的scripts中添加一行命令
"postinstall": "patch-package"
- 删除node_modules,再执行一下
npm i
,等依赖包安装完毕后,你再到node_modules下的该依赖包中去查看代码,会发现是你之前修改过的代码。
扩展:
为啥要给你的项目中的package.json文件的scripts中添加一行命令 "postinstall": "patch-package"
?
postinstall 是 npm 中的一个钩子脚本(Lifecycle scripts),它会在每次安装一个模块之后执行。它允许开发者在模块安装完成后执行一些自定义的脚本,例如构建或者配置。
通常,postinstall 钩子用于执行一些依赖包安装后的操作,例如构建或者生成一些必须的文件等。一些常见的用途包括:
在安装后为应用程序或库安装所有的依赖项。
将包内的源代码构建为可以运行的代码。
生成或修改一些必要的配置文件或者资源文件。
在 npm 中,安装一个模块后,会依次执行以下命令:
preinstall: 在模块安装前执行
install: 安装模块
postinstall: 安装模块后执行
其中,postinstall 钩子在安装完成后执行,可以用来完成一些安装后的操作。
# 相关原理:
npm patch 是 npm 自带的一个命令,可以通过 npm version patch 来实现自动更新版本号,并自动生成一个 patch 文件,
但是这个 patch 文件需要手动编辑,然后提交到代码库中。而且,每当安装新版本的依赖包时,都需要手动重新应用 patch 文件。
patch-package 则是一个第三方工具,可以通过 patch-package 命令自动生成一个 patch 文件,然后将这个 patch 文件提交到代码库中,
同时将 patch 文件也放在依赖包的根目录下。这样,每当安装新版本的依赖包时,patch-package 会自动读取依赖包根目录下的 patch 文件,
并将其应用到依赖包中。这样,每次安装新版本的依赖包时,都会自动应用之前打的 patch 文件,从而不用手动重新打 patch 文件。
总结一下:
使用 patch-package 更加方便,因为它可以自动读取 patch 文件,从而不需要手动打 patch 文件或者手动应用 patch 文件。
# 大致流程:
最上面有详细的流程,下面是大概的流程,只是chatGPT提供的思路。
使用 npm patch 的流程大致如下:
- 修改依赖包源代码
- 运行 npm version patch 命令,生成 patch 文件
- 手动编辑 patch 文件
- 提交代码库
- 安装依赖包时,手动重新应用 patch 文件
使用 patch-package 的流程大致如下:
- 修改依赖包源代码
- 运行 patch-package
<package-name>
命令,生成 patch 文件 - 提交代码库
- 安装依赖包时,自动应用之前打的 patch 文件