DEV Community

Cover image for You need to try this NPM Package
Răzvan Stătescu
Răzvan Stătescu

Posted on • Originally published at blog.statescu.net

You need to try this NPM Package

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.

Discussion (9)

Collapse
moopet profile image
Ben Sinclair

"You need to try this NPM Package"

The title might sound clickbait

Perhaps it would be better if it was descriptive - something like, "Here's a great tool to help you patch your NPM packages" ?

Collapse
razvanstatescu profile image
Răzvan Stătescu Author

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.

Collapse
bias profile image
Tobias Nickel

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).

Collapse
razvanstatescu profile image
Răzvan Stătescu Author

Yes, with patch-package is pretty clean and easy to patch a package.

Collapse
akhilpanchal profile image
Algorythm

Hi:
Thanks for this article.
I am trying to patch a file in the react-dnd-html5-backend package. It has a dist and a lib folder under node_modules/react-dnd-html5-backend. I am not quite sure which files to change in the node_modules folder since the package has cjs, umd and esm folders for each module system. I tried updating the file under the lib 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 :)

Collapse
anudeepreddy profile image
Anudeep Reddy

Really appreciate for sharing this with the wider community

Collapse
razvanstatescu profile image
Răzvan Stătescu Author

Sure! 🎉

Collapse
sowmenappd profile image
Sowmen Rahman

Okay, this post and the package came to my list like a godsend!

Collapse
razvanstatescu profile image
Răzvan Stătescu Author

Haha, I'm glad