Mapping your npm scripts with npmapper

Matti Bar-Zeev
Nov 2 · 2 min read

One of the cool features of npm is the ability to run procedures which can be defined under the project’s package.json file.
I’m pretty sure that if you are reading this post you also have a few npm scripts under your project’s package.json file and are wondering what “mapping” them means…

Large projects usually contain large number of npm scripts. You have a script for testing, for building, for linting, etc. Those scripts usually are the aggregation of a number of other building blocks, for example, a test script is made out of unit testing, e2e testing and other testing aspects which are composed together.

But while creating these “lego-bricks” and composing them together gives you great flexibility, it makes your package.json file very hard to understand and maintain. What calls what? what params are passed to a command? are there any duplications?
We need something to inspect our scripts and map them so it will be easy to read and understand them. At least I needed it…

So I have created npmapper

npmapprer is an npm CLI tool which lets you map your npm scripts in a human-friendly way to get a good overview on what’s really going on in your package.json file.
Just run npx npmapperon your project and you will get a nice HTML report on your browser.
They say a picture is worth a thousand words so here is an image of an HTML report example of running npmapper on Vue.js package.json file, only for the test script:

vue.js test script mapped

You can see in the image above exactly what are the steps which run under the test script. You can drill into each and see its parameters or sometimes what delegation it does to another script (or in some projects even to another project’s package.json).

You can decide whether you want to map the entire scripts or just the one which interests you, or perhaps you’d like the outcome to be a JSON report instead of HTML one.

Wanna try it? simply run npx npmapperon your project containing a package.json file and the result will pop on your browser.
Wanna read more details? Here is the Github repo and the NPM page for the project.

And of course, I would love to hear any suggestion, comment of feedback you might have on the tool. Happy mapping :)

Matti Bar-Zeev

Written by

Mind reflections & individual thought patterns of one code musician ▪ Believes in craftsmanship ▪ Culture over Technology ▪ Always learning...

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade