How to create a diff of npm package releases on the command line

Today I came across Julian Gruber‘s package npm-diff, which solves a problem that I regularly have.

You probably know the situation: you update one dependency in your Node.js project, and everything breaks. Even though this update was supposed to be a backward-compatible patch release, things went down. How can you now create a diff of the two npm packages quickly? Go to GitHub and make a diff there? I always found this process to be cumbersome.

This situation is where the npm-diff command comes into play. ๐ŸŽ‰

You can install the package globally or use it via npx. The usage is straightforward. Define the package name paired with two release version numbers, and you can access a diff of the two package versions.

npm-diff <package-name> <release-1> <release-2>

npm-diff web-vitals-element 1.0.0 1.0.1
CLI with npm-diff uncolored output

The bare-bones command creates an “uncolored diff” of the two package versions. As Julian describes in the package documentation, you can pipe the npm-diff output into colordiff (which you probably have to install first) and less to see a nicely colored diff.

npm-diff web-vitals-element 1.0.0 1.0.1 | colordiff | less
CLI output of color npm-diff command using colordiff

That’s much better already! I took it one step further.

A while ago, I started using delta for git diffs on the command line. It’s fantastic! It shows line numbers, supports syntax highlighting, and is highly configurable. It even supports side-by-side diffing in the terminal!

npm-diff web-vitals-element 1.0.0 1.0.1 | delta | less

That looks pretty great if you ask me!

CLI output of npm-diff using delta

And as a last step, because I don’t see myself using npm-diff without the colorful output, I added an npm-diff shell function to my environment.

function npm-diff() {
  command npm-diff $1 $2 $3 | delta --width $(tput cols) | less

If you wonder what the tput makes in there, I have delta configured to show always the side-by-side view. This view requires a width definition and tput allows me to span the diff over the full terminal width.

Happy diffing! ๐Ÿ‘‹

Author: admin

Leave a Reply

Your email address will not be published.