在前端开发中，我们可能需要处理团队中的项目结构以及成员之间的合作，@atomist/org-visualizer 就是为了帮助我们解决这些问题而生的一个 npm 包。本文将介绍如何使用 @atomist/org-visualizer ，希望能够为大家提供帮助。
安装
首先需要安装 @atomist/org-visualizer 包，我们可以在终端中使用以下命令进行安装。
npm install --save-dev @atomist/org-visualizer
使用方法
@atomist/org-visualizer 的主要功能是帮助我们生成团队成员之间的合作关系图。现在我们将介绍如何使用 @atomist/org-visualizer 生成这张图。
1. 建立配置文件
在项目的根目录中新建名为 .atomist 的文件夹，并在其中新建名为 org-visualizer.json 的文件。配置内容如下：
-- -------------------- ---- -------
-
--------- -
------- ---------
--------- -
------- ----------------------
------- ----------------------
--------- --------
-
--
---------- -
--------- -------
-------- -
-
-其中 "source" 是源代码的配置， "display" 是输出图的配置。
2. 运行
在终端中执行以下命令即可生成图像。
node_modules/.bin/org-visualizer generate
3. 输出
生成的图像将会在 org-visualizer 目录下的 output 文件夹中。通过打开 output/index.html，就能够看到我们生成的图像。
示例代码
下面是示例代码，展示了如何将 @atomist/org-visualizer 应用到我们的项目中。
-- -------------------- ---- -------
----- ------------- - -----------------------------------
-- ----
----- ------ - -
------- -
----- ---------
------- -
----- ----------------------
----- ----------------------
------- --------
-
--
-------- -
------- -------
------ -
-
--
-- ----
-------------------------------------- -- -
--------------------
------------ -- -
--------------------- -----
---结论
@atomist/org-visualizer 提供了很好的方案来可视化团队项目结构和成员之间的合作关系。本文简单介绍了如何使用 @atomist/org-visualizer ，希望能够为你在实际应用中提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115138