patch-package
以前改第三库的时候,不是把第三方包全部下载下来改,就是用extend,mixin之类的方法硬改,往往需要修改的只有几行代码,但是却要做一大堆拷贝。
这里就要推荐一个神器了:patch-package
安装
npm i patch-package
// 或者
yarn add patch-package postinstall-postinstall
package.json
// 在package.json中添加配置,帮助我们下载node_module时,先进行diff
"scripts": {
+ "postinstall": "patch-package"
}
修改文件
以element-ui为例,直接修改node_modules中的lib文件夹下的内容,有时候对我们是有难度的。所以可能需要我们下载相同版本的element-ui代码,修改好之后再打包,最后将打包后的lib文件夹替换掉我们项目中node_modules的lib文件夹。
看到这里,你可能会觉得疑惑,修改node_module下的文件,只会对你本地项目起效,到了其他环境,还不是没有效果吗?
别急,下面让我运行一行命令,一切就清晰了!
生成diff文件
// 这里的package-name指的就是你修改的库,比如element-ui
yarn patch-package package-name
// 或者
npx patch-package package-name
当你运行完这一行命令之后,你会发现生成了一个新的patches文件夹,在这个文件夹下面同时生成了一个文件:库名 + 版本.patch,而这个文件中就记载了你在node_module中所有的修改。
最后
你可能没有意识到,你已经完成了所有。此时你只要删除以前的node_modules文件夹,重新下载一次,你就会发现新下载的node_modules文件夹里的内容,居然是你改过的那个。这是因为当你下载第三库的时候,会先和patch里的内容进行对比修改。
这样的修改过程让我感觉十分便利,而且现在我们会用yarn.lock或者package-lock.json来规定我们第三方库的版本号,且不会轻易去修改它,所以升级带来的问题也不是太大。