DEV Community

Stefan Judis
Stefan Judis

Posted on • Originally published at stefanjudis.com

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

CLI output of color npm-diff command using colordiff

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

delta is a diff tool with syntax highlighting

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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! ๐Ÿ‘‹

Discussion (0)