How to create a diff of npm package releases on the command line (#snippet)

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 w…

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.

delta is a diff tool with syntax highlighting

Section titled 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

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


Reply to Stefan
Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language: