Why it matters
A package-lock.json records every package npm installed and where, but at thousands of lines it's hard to answer simple questions from it: why is this package here, why are there three copies of it, and what licences am I shipping? npm explain and npm ls answer some of them, but only in a checked-out project with node_modules installed.
This viewer reads the lockfile on its own. It rebuilds the dependency graph by resolving each dependency the way Node does, looking in the nearest node_modules folder and then each parent folder in turn, so nested copies, workspaces and aliased packages come out right. For every package installed more than once it collects the version ranges the dependents asked for and checks with semver whether a single version would satisfy them all, which is when npm dedupe can merge the copies. Pick any package to see the chain of dependencies that pulled it in, from your package.json down. Everything runs in your browser.
How it works
- InputA package-lock.json
- In your browserDependencies resolved the way Node does
- OutputDuplicates, why-chains, depth and licences
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Package | Versions | Copies | Dedupe |
|---|---|---|---|
| ms | 2.0.0, 2.1.3, 2.1.2 | 3 | The ranges need 3 versions |
| debug | 2.6.9, 4.3.6 | 2 | The ranges need 2 versions |
| picocolors | 1.0.0, 1.0.1 | 2 | npm dedupe could use 1.0.1 |
How to use it
- Drop your package-lock.json, or paste it.
- Read the overview and the duplicates table.
- Type a package name to see why it's installed.
- Download the CSV for a licence review.
FAQ
What does 'npm dedupe could use 1.2.3' mean?
Every package that depends on the duplicated one asked for a range that 1.2.3 satisfies, so npm dedupe (or a fresh install) can usually keep one copy. When the ranges can't all be met by one version, copies are needed, and the fix is updating the dependent that asks for the old range.
Why is a dev dependency of a package not listed?
npm never installs the devDependencies of your dependencies, only those of your own project and its workspaces, so the lockfile doesn't contain them.
Do I need package.json too?
Not for lockfile v2 or v3, which record your own dependencies in the root entry. Version 1 lockfiles don't, so add package.json for accurate dev and production splits.
What about yarn.lock or pnpm-lock.yaml?
Not yet: they record resolution differently. This tool reads npm's package-lock.json and npm-shrinkwrap.json.
Is my lockfile uploaded?
No. It's read in your browser and nothing is sent anywhere. The sample is a made-up project.
