DEV Community

Cover image for I made a Dependency Graph Library for JavaScript & TypeScript
jn
jn

Posted on • Edited on

I made a Dependency Graph Library for JavaScript & TypeScript

Hello! I'd like to introduce my project, DecodeDeps. It is a development tool to enhance the efficiency of JavaScript and TypeScript development.

What is DecodeDeps?

DecodeDeps is a tool for analyzing and visualizing module dependencies in JavaScript, JSX, TypeScript, and TSX projects. It identifies modules through import and require statements and represents the relationships between modules in a graph, helping you build a more structured codebase.

Preview

Step 1. Prepare your project and install the library.

project

Step 2. Enter the command.

command

Step 3. Check the results on localhost5001.

result

Key Features

  • JS, JSX, TS, TSX Support: Analyzes and visualizes dependencies for JavaScript, JSX, TypeScript, and TSX files.
  • Import & Require Support: Captures dependencies across ES modules and CommonJS modules through import and require statements.
  • Flexible Folder Input: Allows you to input multiple folders as an array to analyze the entire project or specific subfolders with ease.
  • Dynamic Node Colors: Node colors vary by module size, providing a quick overview of module weight. Hover over a node to view the precise module size.
  • Interactive Graph Customization: Adjust node size and link distance, zoom in/out, and use drag-and-drop functionality to explore the dependency graph freely.

Who Should Use This Tool?

  • Refactoring Teams: Easily identify optimization points during refactoring.
  • Large Codebase Managers: Efficiently handle complex module dependencies.
  • Junior Developers: Quickly understand the overall code structure.
  • Performance-Critical Project Teams: Improve build and loading performance through optimized bundling.

This project is open-source, and your feedback and contributions are always welcome. I'm continually working to develop DecodeDeps into an even more efficient tool by adding new features and providing regular updates.

If you'd like to try using this library, please visit GitHub.
https://github.com/vectordxy/decode-deps

Thank you!

Top comments (0)