背景
由于公司业务需要，需要新建一个npm包做部分业务功能开发，并引入了antd的部分组件，最后需要发布一个独立的npm包给使用方，并且希望打包的时候不要带上antd的全局样式，因为antd的全局样式会对使用方造成样式污染（前端主体技术栈用的vue，将react写的功能做成一个npm包嵌入到vue的页面后，如果带有antd的全局样式将会影响到vue的element ui的全局样式）。
分析
可以打开node_modules下的antd代码，找到样式文件入口如图
目录：/node_modules/antd/es/style/core/index.less
，可以看到这里import了一个全局的样式文件gloabl.less
这里面有一些覆盖全局的样式，有时候很烦人没法修改，如果能够在使用的时候直接去掉gloabl.less的引入是不是就不会有问题了？
解决
希望在打包的时候不要引入gloabl.less，这个时候就牵扯到了如何给node_modules打补丁的问题。 当然不直接在node_modules打补丁，自己搞一个antd的内部私有版本也是可行的，不过有一点绕，而且本来是一个很简单的操作，反而搞复杂了。
那打补丁有很多种方法，写个node脚本也可以做到。
在代码根目录建一个patch文件夹，新建一个compatible-antd.js文件，写入以下内容
/**
* 屏蔽antd的全局样式，避免antd全局样式影响到使用方
* https://github.com/fi3ework/blog/issues/44
*/
const fs = require('node:fs')
const path = require('node:path')
const antdEsStyleCoreIndex = path.resolve('./', './node_modules/antd/es/style/core/index.less')
let index = fs.readFileSync(antdEsStyleCoreIndex, 'utf-8')
index = index.replace(
`@import 'global';`,
`// @import 'global';`,
)
fs.writeFileSync(antdEsStyleCoreIndex, index)
然后在package.json的脚本里面添加一行
"postinstall": "node ./patch/compatible-antd.js",
那么在下次yarn或npm install的时候就会执行这个node脚本进行replace操作
这种方法弊端就在于要写脚本，且如果修改的地方比较多的时候，写起脚本来还是比较繁琐的
另外一种更合理的办法
用patch-package来自动且优雅的管理你的补丁
-
首先
yarn add patch-package -D安装一下patch-package -
然后在你本地的
/node_modules/antd/es/style/core/index.less里面手动将@import 'global';删除掉 -
再执行
yarn patch-package antd -
执行成功后会看到代码根目录多出来一个patches文件夹
- 同样在package.json的脚本里面添加一行
"postinstall": "patch-package",即可
特别的点
由于前面讲到我需要将这个项目发布为一个独立的npm包，发布出去的构建结果里面不需要包含antd的全局样式，但开发过程中还是需要的。所以我是在prepublishOnly的时候进行打补丁，并且在publish完成之后进行回滚，所以用了--reverse
原理
patch-package的原理也非常简单，执行patch-package时会将当前node_modules下的源码与原始源码进行git diff，并在项目根目录下生成一个patch补丁文件，补丁文件包含了diff的内容，方便下次使用时进行打补丁操作
最后
前面讲到的关于“如何将react组件或页面嵌入到vue项目”，后续会作为一篇独立的文章发布出来，敬请期待哦～期待点赞收藏
