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 npmapper on 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 npmapper on 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 suggestions, comments or feedback you might have on the tool. Happy mapping :)
Oldest comments (0)