介绍 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 生态系统以及不同软件包之间的相互关系。通过更好地理解生态系统，您将能够做出更好的决策并构建更好的应用程序。