插件系统概述

先行技术

Swagger UI 大量借鉴了 React 和 Redux 中的概念和模式。

如果您还不熟悉，以下是一些建议阅读材料

在以下文档中，我们不会花时间定义上述资源中涵盖的基础知识。

注意: 本节中的某些示例包含 JSX，这是一种 JavaScript 语法扩展，对于编写 React 组件很有用。

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

系统

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

React 组件
绑定的 Redux actions 和 reducers
绑定的 Reselect 状态选择器
系统范围内的可用组件集合
内置辅助函数，例如getComponent、makeMappedContainer和getStore
对 React 和 Immutable.js 库的引用（system.React、system.Im）
用户定义的辅助函数

当调用 Swagger UI 时，系统通过迭代（“编译”）通过presets和plugins配置选项提供给 Swagger UI 的每个插件来构建。

预设

预设是插件数组，通过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语句。

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

1
getComponent("ContainerComponentName", true)

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