需求
能够生成当前项目的目录结构（最好包括使用的项目组件依赖、包依赖），以便进行项目整体代码阅读和解析
项目树结构
tree
安装
brew install tree
使用
根据tree --help里面的指引，可以进行项目结构的打印，下面是一个例子
tree -I 'node_modules' > test && cat test
下面是我一个项目的结构
├── README.md
├── build
│ ├── asset-manifest.json
│ ├── index.html
│ └── static
│ └── js
│ ├── 2.68c221c2.chunk.js
│ ├── 2.68c221c2.chunk.js.LICENSE.txt
│ ├── 2.68c221c2.chunk.js.map
│ ├── main.64625699.chunk.js
│ ├── main.64625699.chunk.js.map
│ ├── runtime-main.e61ba77d.js
│ └── runtime-main.e61ba77d.js.map
├── dir
├── package.json
├── public
│ └── index.html
├── src
│ ├── App.jsx
│ ├── components
│ │ ├── 1_setState
│ │ │ └── index.jsx
│ │ ├── 2_lazyload
│ │ │ ├── About
│ │ │ │ └── index.jsx
│ │ │ ├── Home
│ │ │ │ └── index.jsx
│ │ │ └── index.jsx
│ │ ├── 3_hooks
│ │ │ └── index.js
│ │ ├── 4_fragement
│ │ │ └── index.jsx
│ │ ├── 5_context
│ │ │ ├── index.css
│ │ │ └── index.jsx
│ │ ├── 6_optimize
│ │ │ ├── index.css
│ │ │ └── index.jsx
│ │ ├── 7_render_props
│ │ │ ├── index.css
│ │ │ └── index.jsx
│ │ └── 8_ErrorBoundary
│ │ ├── Child.jsx
│ │ └── Parent.jsx
│ └── index.js
└── yarn.lock
这个还可以吧。比较清晰，缺点是没有成图，但是易于粘贴展开进行详细描述。
WebStorm自带diagram工具
重磅推荐，是WebStorm自带的工具，可以查看代码组件依赖视图。在你需要查看的文件夹点击右键，选择diagram
经过一段时间的等待后可以看到这样的视图，上面有工具栏，可以更方便地进行查看，也可以针对某个组件进行拖动。
属实是阅读源码的利器！！
包依赖查看
npm-remote-ls
安装
npm install -g npm-remote-ls
使用
npm-remote-ls bower
这个方式不知道为啥我一直报这个错：
could not load build@latest status = 401
npmgraph
安装
npm install npmgraph
使用
open node_modules/npmgraph/index.html # 直接通过浏览器打开
它是怎么工作的
NPMGraph是递归遍历modules的依赖展现的图表， 通过NPM的API来提取模块依赖， 除了网络非常慢或者图表体积出乎异常的大会花些时间之外，整体程序执行的性能非常不错，每个组件的依赖信息已经被缓存到localstorage，所以对后续的请求速度（特别是在有相同的模块展现的场景下）是有很多好处的。
其它
依赖图表是通过viz.js来绘制的，如果你对它不太熟，可以参考Viz.js，它是一个真正实用的项目，是一个任何对js绘制图表感兴趣同学的必备工具组件。
实际上我使用的时候一直在报404。。可能有别的兄贵成功了吧
Npm.anvaka
这是一个可视化网站，此站点允许您将包树视为2D或3D中的节点图。
http://npm.anvaka.com/#/view/2d/waterline
还挺好看的。
npm list && npm view <PACKAGE> dependencies
这两个就是官方命令了，查看项目依赖关系树的，可以详见官方文档。
参考链接
- How to view the dependency tree of a given npm module? - Stack Overflow
- npm依赖管理：冗余，依赖树 - 脚本小娃子 - 博客园 (cnblogs.com)
- NPMGraph - 知乎 (zhihu.com)
- How to view the dependency tree of a given npm module? - Stack Overflow
- [Module Dependency Diagrams | WebStorm (jetbrains.com)
