UnJS Relations 介绍
- 发布于 -
- 分类
- 作者
Estéban S
如今，UnJS 由**超过 50 个软件包**组成。每个月，都有新的软件包加入到这个生态系统中。
如果你是**新手**，你很可能会迷失在这些软件包的海洋中。你应该使用哪一个？这个软件包和那个软件包有什么区别？所有这些软件包是否有共同点？Nuxt 使用 UnJS 吗？
如果你正在**学习 UnJS**，你可能希望提高对生态系统的理解。
如果你**已经熟悉**UnJS，你可能会觉得很难理解不同软件包之间的关系。
但无论你是谁，你能区分 Nitro 和 H3 吗？你知道 Nitro 和 H3 之间有什么关系吗？
有了 UnJS Relations，无论是初学者、专家，还是向他人解释 UnJS，回答这些问题都**从未如此简单**。
让我们来看看这个新工具。
UnJS Relations
可视化确实有助于理解复杂的系统，尤其是当系统的每个部分都相互连接时。这就是我们创建 UnJS Relations 的原因。
UnJS Relations 是一个可视化工具，它绘制一个图表，旨在帮助您理解 UnJS 生态系统及其关系。
您可以选择任何 UnJS 软件包、任何 npm 软件包，或两者任意组合。图表将实时更新。您还可以隐藏或显示依赖项和开发依赖项。
有一个选项可以显示使用所选软件包的子软件包。
您可以双击一个软件包以打开一个抽屉，其中包含软件包描述及其依赖项列表。通过这个，您可以轻松访问软件包页面或绘制软件包的关系。
回到 Nitro 和 H3 的例子。您可能已经注意到这两个软件包是相互关联的。但如何关联呢？这是关系图
如何理解这个图表？
首先，让我们看看 H3 的依赖项。我们可以看到 radix3，它是一个路由器；unenv，它是一个用于构建环境无关 JavaScript 的工具；以及 listhen，它是一个 HTTP 监听器。有了这些信息，我们可以说 H3 是一个用于构建运行时无关的 Web 服务器的工具。
现在，让我们看看 Nitro 的依赖项。它与 H3 有许多共同的依赖项。Nitro 将 H3 作为其依赖项。这是一个重要的信息，告诉我们 Nitro 是在其基础上构建的。其他一些依赖项包括 citty（一个 CLI 构建器）、c12（一个配置读取器）、unstorage（一个键值存储 API）、hookable（一个钩子工具）和 ofetch（一个更好的 fetch API）。
有了这些信息，我们可以说 Nitro 是一个用于构建 Web 服务器的框架，它比 H3 具有更多的功能和更广的范围。因为它是在 H3 的基础上构建的，所以学习 H3 将有助于您理解 Nitro。
添加 npm 软件包
使用 npm Packages 按钮，您可以将任何 npm 软件包添加到图表中。
例如，让我们使用 npm 源将 Nuxt 添加到图表中。软件包出现在列表中后，别忘了选择它。
是的，Nuxt 是在许多 UnJS 软件包的基础上构建的，包括 Nitro 和 H3。
了解更多，请阅读Nuxt 的服务器引擎。你可以用任何你想要的 npm 软件包来试试！
结语
我们衷心希望这个工具能帮助您理解 UnJS 生态系统以及不同软件包之间的关系。通过更好地理解生态系统，您将能够做出更好的决策并构建更好的应用程序。