npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webpack-cyclic-dependency-checker

v0.0.1

Published

Webpack cylic dependency checker. Does a depth-first traversal of webpack's stats.json output

Downloads

8,415

Readme

Webpack Cylic Dependency Checker

This tool analyzes your Webpack stats.json file to look for cyclic dependencies using "depth first" traversal. It detects cycles between any number of files, as well as files that require themeselves.

Why? Some tools like Flow, and some editors, will crash or hang forever when trying to analyze projects that use cyclic dependencies. Also cyclic dependencies are often a symptom of poorly organized code. Detecting them can help clean up a project. See the examples of cycle for a demonstration.

Install

npm install --save-dev webpack-cyclic-dependency-checker

Command Line Usage

First, generate a Webpack stats.json file by passing in the --json flag. The full command might look something like:

webpack --json --config webpack.config.js > stats.json

Then pass the relative stats.json file path to this tool:

iscyclic stats.json

If there's a cycle in your dependencies, the output will resemble:

Detected cycle!
(14) ./src/index.js -> (327) ./src/components/HomePage.js -> (14) ./src/index.js

You can see in this example output ./src/index.js is repeated at the beginning and end. That's showing the full cycle.

The numbers are the Webpack module IDs. This tool won't show the specific lines of the require / import statements, but it's fairly simple to find those lines in the specified files

Command Line Options

--include-node-modules

By default all dependencies inside node_modules are ignored. This tool is mainly designed to detect cycles in your source code. If you want to include searching for cycles in external dependencies, use the --include-node-modules flag:

iscyclic stats.json --include-node-modules

Use in Node.js

You can require the functions used in this library directly in Node.js.

const cyclicUtils = require( 'cyclicUtils' );

const statsJson = require( './path/to/stats.json' );
const includeNodeModules = false;

const dependencyGraph = cyclicUtils.getDependencyGraphFromStats(
    statsJson, includeNodeModules
);

const cycle = cyclicUtils.isCyclic( dependencyGraph );

Check out cli.js to see how the output is parsed.

getDependencyGraphFromStats( json:Object, includeNodeModules:booelan )

Generates the dependency graph from Webpack's stats.json file. The output looks something like:

{
    1: [ 2 ],
    2: [],
}

Where the key is the Webpack module ID, and the array is the IDs of each dependency.

isCyclic( dependencyGraph:Object )

Returns the an array of module IDs in the cycle if a cycle is detected. Otherwise returns null.

Examples of Cycles

Cycle Through Multiple Files

A.js

import B from './B.js';

B.js

import C from './C.js';

C.js

import A from './A.js';

This results in a cycle, from A to B to C with the "back edge" going from C to A.

Cycle Through Self

A.js

import { something } from './A';
export { something: true };

A cycle like this is usually a mistake in the code, but it's perfectly valid ES6 syntax.