前言
在前端开发中，我们经常会用到 ES6 的模块化特性，在 webpack、rollup 等打包工具下进行代码构建时，都需要构建一个模块依赖关系图。然而，在某些场景下，我们希望对代码进行技术分析和故障排查，需要进一步分析模块依赖关系。这时候，一个好用的依赖关系图工具就显得尤为重要。
本文将介绍一款基于 broccoli 的 npm 包 broccoli-es-dependency-graph，它可以生成一个 HTML 文件，显示所有 ES6 模块之间的依赖关系，方便我们进行分析和调试。
简介
broccoli-es-dependency-graph 是一个基于 broccoli 的 npm 包，主要用于生成所有 ES6 模块之间的依赖关系图。它会遍历项目中所有的 JavaScript 文件，并分析它们之间的依赖关系，最终生成一个 HTML 文件，展示依赖关系图。
安装
我们可以使用 npm 或者 yarn 的方式安装 broccoli-es-dependency-graph 。
npm install --save-dev broccoli-es-dependency-graph
或者
yarn add --dev broccoli-es-dependency-graph
使用
API
const BroccoliDependencyGraph = require('broccoli-es-dependency-graph');
const broccoliNode = new BroccoliDependencyGraph(inputNode, options);参数说明:
inputNode：一个 broccoliNode。options：配置参数，可选参数有：name：生成文件名，默认为dependency-graph.html。appendToHead：插入到 HTML 头部的文本。appendToBody：插入到 HTML body 的文本。excludes：需要排除的文件数组，可以是文件名或匹配表达式。includePolyfill：是否需要包含对core-js和regenerator-runtime的引用，默认为false。appRoot：应用程序的根目录，默认为当前目录。
示例
我们以一个简单的 ES6 模块化项目为例，展示如何使用 broccoli-es-dependency-graph。
我们的项目目录如下：
├── node_modules
├── package-lock.json
├── package.json
└── src
├── greet.js
├── index.js
└── person.js在 src 目录下，我们有三个 ES6 模块化文件：
greet.js：输出一个打招呼的函数。person.js：输出一个对象，包含name和age属性。index.js：引入了greet.js和person.js，使用它们来打印一句话。
我们的 index.js 文件：
import { sayHello } from './greet';
import Person from './person';
const person = new Person('Tom', 20);
sayHello(person.name);现在，我们需要生成一个依赖关系图，展示这三个模块之间的依赖关系。
首先，在项目根目录下创建一个 Brocfile.js 。
const BroccoliDependencyGraph = require('broccoli-es-dependency-graph');
const funnel = require('broccoli-funnel');
const srcTree = funnel('src');
module.exports = new BroccoliDependencyGraph(srcTree);然后，我们运行 broccoli build dist 命令，生成一个 dependency-graph.html 文件，放在 dist 目录下。
在浏览器中打开这个 HTML 文件，可以得到依赖关系图：
总结
broccoli-es-dependency-graph 是一个简单易用的工具，用于生成 ES6 模块化项目的依赖关系图。通过它，我们可以更加方便地进行代码分析和故障排查。在实际开发中，我们可以将其集成到构建工具链中，实现即时分析和可视化显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde5328