circular-dependency-plugin-visualizer

🔄 Circular Dependency Plugin Visualizer

This package was made for use with the circular-dependency-plugin (GitHub|npm) to assist in making sense of your circular dependencies and aid in fixing them.

Installation

Use a package installer like NPM to install the package and the peer dependency circular-dependency-plugin

npm i --save-dev circular-dependency-plugin circular-dependency-plugin-visualizer

Usage

The visualizer takes all the same options as circular-dependency-plugin >=4.4.0 and an additional optional configuration object specific to the visualization.

// webpack.config.js
const CircularDependencyPlugin = require("circular-dependency-plugin");
const visualizer = require("circular-dependency-plugin-visualizer");

module.exports = {
  entry: "./src/index",
  plugins: [
    new CircularDependencyPlugin(
      visualizer(
        {
          exclude: /node_modules/,
          cwd: process.cwd(),
        },
        {
          filepath: path.join(
            __dirname,
            "circular-dependency-visualization.html"
          ),
        }
      )
    ),
  ],
};

Options

property	type	default
filepath	string	path.join(process.cwd(), 'circular-dependency-visualization.html')

Visualzation Notes

Node names

You can hover over a node to show the file path.

Node color

The nodes show different colors for the directory that they're in (up to 10 directories). If because of your directory set up, they are all in the same root directory, like src, try setting the cwd property in the circular-dependency-plugin options to the common root.

// webpack.config.js
const path = require('path');

module.exports = {
  ...,
  plugins: [
    new CircularDependencyPlugin(visualizer({
      ...
      cwd: path.resolve(__dirname, 'src')
    })
  ]
};

Stroke animations

The strokes between nodes are animating in the direction of the import, showing the direction of the dependency chain. If a.js imports b.js, you will see the animation go from the a.js node to the b.js node. This is also the same direction as the arrows from the circular-dependency-plugin.

a.js -> b.js