demand

The ability to generate a directory structure of the current project (preferably including project component dependencies, package dependencies used) for overall project code reading and parsing

Project tree structure

tree

The installation

brew install tree
Copy the code

use

Follow the instructions in tree –help to print the project structure. Here is an example

tree -I 'node_modules' > test && cat test
Copy the code

Here is the structure of one of my projects

├ ─ ─ the README. Md ├ ─ ─ build │ ├ ─ ─ asset - the manifest. Json │ ├ ─ ─ index. The HTML │ └ ─ ─ the static │ └ ─ ─ js │ ├ ─ ─ c221c2. 2.68 the chunk. The js │ ├ ─ ─ 2.68 c221c2. The chunk. Js. LICENSE. TXT │ ├ ─ ─ c221c2. 2.68 the chunk. Js. Map │ ├ ─ ─ main. 64625699. The chunk. The js │ ├ ─ ─ Main. 64625699. The chunk. Js. Map │ ├ ─ ─ the runtime - main. E61ba77d. Js │ └ ─ ─ the runtime - main. E61ba77d. Js. Map ├ ─ ─ dir ├ ─ ─ package. The json ├ ─ ─ public │ └ ─ ─ index. The HTML ├ ─ ─ the SRC │ ├ ─ ─ App. The JSX │ ├ ─ ─ components │ │ ├ ─ ─ 1 _setstate │ │ │ └ ─ ─ index. The JSX │ │ ├ ─ ─ 2 _lazyload │ │ │ ├ ─ ─ the About │ │ │ │ └ ─ ─ index. The JSX │ │ │ ├ ─ ─ Home │ │ │ │ └ ─ ─ index. The JSX │ │ │ └ ─ ─ index. The JSX │ │ ├ ─ ─ 3 _hooks │ │ │ └ ─ ─ index. The js │ │ ├ ─ ─ 4 _fragement │ │ │ └ ─ ─ index. The JSX │ │ ├ ─ ─ 5 _context │ │ │ ├ ─ ─ index. The CSS │ │ │ └ ─ ─ Index. The JSX │ │ ├ ─ ─ 6 _optimize │ │ │ ├ ─ ─ index. The CSS │ │ │ └ ─ ─ index. The JSX │ │ ├ ─ ─ seven _render_props │ │ │ ├ ─ ─ index. The CSS │ │ │ └ ─ ─ index. The JSX │ │ └ ─ ─ eight _errorboundary │ │ ├ ─ ─ Child. The JSX │ │ └ ─ ─ the Parent. The JSX │ └ ─ ─ index. The js └ ─ ─ yarn. The lockCopy the code

This is ok. Relatively clear, the disadvantage is that there is no graph, but easy to paste expand detailed description.

WebStorm comes with the Diagram tool

WebStorm is a tool that comes with WebStorm to view code component dependencies. Right-click the folder you want to view and select Diagram

After a while, you can see a view like this with a toolbar that makes it easier to view or drag for a component.

True is reading source sharp weapon!!

Package dependency viewing

npm-remote-ls

The installation

npm install -g npm-remote-ls
Copy the code

use

npm-remote-ls bower
Copy the code

I don’t know why I keep reporting this error:

could not load build@latest status = 401
Copy the code

npmgraph

The installation

npm install npmgraph
Copy the code

use

The open node_modules/npmgraph/index. HTML # directly through the browser to openCopy the code

How does it work

NPMGraph is a graph that recursively traverses modules’ dependencies. It extracts module dependencies through NPM API. The overall program execution performance is very good, except that the network is very slow or the graph takes some time, and the dependency information of each component has been cached to localstorage. So there are many benefits to subsequent request speed (especially in scenarios where the same modules are present).

other

Dependency charts are drawn using viz.js. If you are not familiar with it, check out Viz.js, which is a really useful project and a must-have tool component for anyone interested in js charts.

In fact, I used 404 all the time. Maybe some other brother made it

Npm.anvaka

This is a visualization site that allows you to view a package tree as a node graph in 2D or 3D.

http://npm.anvaka.com/#/view/2d/waterline
Copy the code

It’s kind of nice.

npm list && npm view <PACKAGE> dependencies

These two commands are the official commands. To view the project dependency tree, please refer to the official documentation.

Refer to the link

  • How to view the dependency tree of a given npm module? – Stack Overflow
  • NPM Dependency Management: Redundancy, Dependency Trees – Scripting children – Blogpark (CNblogs.com)
  • NPMGraph – Zhihu.com
  • How to view the dependency tree of a given npm module? – Stack Overflow
  • [Module Dependency Diagrams | WebStorm (jetbrains.com)