Wondering what’s next for npm?Check out our public roadmap! »

    circular-dependency-plugin-visualizer

    1.1.0 • Public • Published

    🔄 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
    

    Install

    npm i circular-dependency-plugin-visualizer

    DownloadsWeekly Downloads

    3,885

    Version

    1.1.0

    License

    ISC

    Unpacked Size

    27.5 kB

    Total Files

    34

    Last publish

    Collaborators

    • avatar