Get Dependency Tree of JavaScript Packages using npm

Effectively handling package dependencies is crucial for creating robust applications. The npm, the JavaScript package manager, provides various features to streamline this process. It provides the capability to access a project's dependency tree. This feature presents a visual representation of the relationships among packages, enabling developers to understand the complexity and hierarchy of their project's dependencies. This tutorial explains how to get dependency tree of JavaScript packages using npm.

Navigate to the project's root directory in the terminal and run the following command:

npm list --all

This command displays a hierarchical tree structure, showcasing all the dependencies and their versions. The --all flag ensures that both direct and transitive dependencies are included in the output.

Here's an example of the output:

my-project@ /var/www/my-project
+-- bootstrap-datepicker@1.10.0
| `-- jquery@3.7.1
+-- bootstrap@5.3.2
| `-- @popperjs/core@2.11.8
`-- highlight.js@11.9.0