The title might sound clickbait but I really find this NPM Package to be extremely useful. The Package I'm talking about is patch-package.
Last week I've made an app, Postzy, and I needed a clean way to slightly modify one NPM Package I was using. This is when I come across patch-package. I was so happy because it was doing exactly what I needed it to do (and this rearely happens with a package 😃).
How does it work?
It's very simple to use.
Patch a package
You first need to go and make some changes to a package inside your node_modules folder.
After that, you can run npx patch-package [package-name]
or yarn, if you're using yarn.
It will create a folder called "patches" inside the root folder of your project. You'll need to commit this folder to git to share the patch with your team and also deploy the changes to your server (depending on your deploy flow).
Apply a patch
After you made a patch, to apply it you can define a npm run command like "postinstall": "patch-package"
. You can run this command on the server after npm install
or on your local machine to apply the patch.
If you have any question, don't hesitate to contact me.
Top comments (9)
"You need to try this NPM Package"
Perhaps it would be better if it was descriptive - something like, "Here's a great tool to help you patch your NPM packages" ?
I said might because I really think this package is awesome :) For me, it was very helpful and I really think this is a package you need to know about.
Nice, OnceI was working on a project and did something similar. I beeded to patch two packages. 'pomelo' and 'bearcat-dat', booth are absolute crap. and I am happy not to use them anymore.
I also made a directly with patch files and a script to copy them into place.
patch-package
looks much more clean.In a current project we are updating sub dependencies with
Yarn resolve
(resolve property in package.json).Yes, with patch-package is pretty clean and easy to patch a package.
Hi:
Thanks for this article.
I am trying to patch a file in the
react-dnd-html5-backend
package. It has adist
and alib
folder undernode_modules/react-dnd-html5-backend
. I am not quite sure which files to change in the node_modules folder since the package hascjs
,umd
andesm
folders for each module system. I tried updating the file under thelib
folder and following the rest of the steps, but I couldnt see the change being reflected.Any suggestions/guidance would be greatly appreciated.
Thanks in advance :)
Really appreciate for sharing this with the wider community
Sure! 🎉
Okay, this post and the package came to my list like a godsend!
Haha, I'm glad