插件系统概述

现有技术

Swagger UI 很大程度上依赖于 React 和 Redux 中发现的概念和模式。

如果您还不熟悉，这里有一些建议阅读的资料

在以下文档中，我们将不花时间定义上述资源中涵盖的基本原理。

注意：本节中的某些示例包含 JSX，它是 JavaScript 的语法扩展，对于编写 React 组件非常有用。

如果您不想设置能够将 JSX 转换为 JavaScript 的构建管道，请查看 React without JSX (reactjs.org)。您可以使用我们的 system.React 引用来利用 React，而无需将副本拉入您的项目中。

系统

system 是 Swagger UI 应用程序的核心。在运行时，它是一个 JavaScript 对象，其中包含许多内容

React 组件
绑定的 Redux 操作和 reducer
绑定的 Reselect 状态选择器
系统范围的可用组件集合
内置的助手，如 getComponent、makeMappedContainer 和 getStore
对 React 和 Immutable.js 库的引用 (system.React, system.Im)
用户定义的助手函数

当 Swagger UI 通过迭代（“编译”）Swagger UI 获取的每个插件时，系统会被构建起来，通过 presets 和 plugins 配置选项。

预设

预设是插件的数组，通过 presets 配置选项提供给 Swagger UI。预设中的所有插件都会在通过 plugins 配置选项提供的任何插件之前编译。考虑以下示例

1
const MyPreset = [FirstPlugin, SecondPlugin, ThirdPlugin]
2

3
SwaggerUI({
4
  presets: [
5
    MyPreset
6
  ]
7
})

默认情况下，Swagger UI 包含内部的 ApisPreset，其中包含一组为 Swagger UI 提供基线功能的插件。如果您指定自己的 presets 选项，则需要手动添加 ApisPreset，如下所示

1
SwaggerUI({
2
  presets: [
3
    SwaggerUI.presets.apis,
4
    MyAmazingCustomPreset
5
  ]
6
})

在添加其他预设时需要提供 apis 预设是 Swagger UI 原始设计的产物，并且可能会在下一个主要版本中删除。

getComponent

getComponent 是注入到每个容器组件中的助手函数，用于获取对插件系统提供的组件的引用。

所有组件都应通过 getComponent 加载，因为它允许其他插件修改组件。它优于传统的 import 语句。

可以通过将 true 作为第二个参数传递给 getComponent 来加载 Swagger UI 中的容器组件，如下所示

1
getComponent("ContainerComponentName", true)

这将把当前系统作为 props 映射到组件。