SwaggerEditor
SwaggerEditor 使用 派生(forked)的 Create React App 作为其构建基础设施。
匿名化分析
Swagger Editor 使用 Scarf 收集匿名化安装分析数据。这些分析数据有助于支持此库的维护者,并且**仅**在安装期间运行。要选择退出,您可以在项目的 package.json
中将 scarfSettings.enabled
字段设置为 false
。
1{2 // ...3 "scarfSettings": {4 "enabled": false5 }6 // ...7}
或者,您可以在安装 npm 包的环境中将环境变量 SCARF_ANALYTICS
设置为 false
,例如 SCARF_ANALYTICS=false npm install
。
入门
先决条件
这些先决条件是安装 SwaggerEditor 作为 npm 包以及本地开发设置所必需的。
- node-gyp 和 Python 3.x
- GLIBC
>=2.29
- 需要安装 emscripten 或 docker,我们推荐使用 docker 选项
安装
假设先决条件已安装,SwaggerEditor npm 包可以安装并与 Node.js >= 12.22.0
配合使用。您可以通过运行以下命令,使用npm CLI 安装 SwaggerEditor
1 $ npm install swagger-editor@alpha
注意:当使用打包工具构建使用 swagger-editor@5 npm 包的项目时,您可能会遇到以下 Node.js 错误:
Reached heap limit Allocation failed - JavaScript heap out of memory
(达到堆限制,分配失败 - JavaScript 堆内存不足)。这通常是由于需要打包的代码量过大引起的。通过扩展 Node.js 最大堆内存限制可以解决此错误:export NODE_OPTIONS="--max_old_space_size=4096"
。
用法
在您的应用程序中使用此包
index.js:
1import React from 'react';2import ReactDOM from 'react-dom';3import SwaggerEditor from 'swagger-editor';4import 'swagger-editor/swagger-editor.css';5
6const url = "https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml";7
8const MyApp = () => (9 <div>10 <h1>SwaggerEditor Integration</h1>11 <SwaggerEditor url={url} />12 </div>13);14
15self.MonacoEnvironment = {16 /**17 * We're building into the dist/ folder. When application starts on18 * URL=https://example.com then SwaggerEditor will look for19 * `apidom.worker.js` on https://example.com/dist/apidom.worker.js and20 * `editor.worker` on https://example.com/dist/editor.worker.js.21 */22 baseUrl: `${document.baseURI || location.href}dist/`,23}24
25ReactDOM.render(<MyApp />, document.getElementById('swagger-editor'));
webpack.config.js (webpack@5)
安装 webpack@5 正确构建 SwaggerEditor 所需的依赖项。
1 $ npm i stream-browserify --save-dev2 $ npm i https-browserify --save-dev3 $ npm i stream-http --save-dev4 $ npm i util --save-dev
1const path = require('path');2const webpack = require('webpack');3
4module.exports = {5 mode: 'production',6 entry: {7 app: './index.js',8 'apidom.worker': 'swagger-editor/apidom.worker',9 'editor.worker': 'swagger-editor/editor.worker',10 },11 output: {12 globalObject: 'self',13 filename: '[name].js',14 path: path.resolve(__dirname, 'dist')15 },16 resolve: {17 fallback: {18 path: false,19 fs: false,20 http: require.resolve('stream-http'), // required for asyncapi parser21 https: require.resolve('https-browserify'), // required for asyncapi parser22 stream: require.resolve('stream-browserify'),23 util: require.resolve('util'),24 url: require.resolve('url'),25 zlib: false,26 },27 alias: {28 // This alias make sure we don't pull two different versions of monaco-editor29 'monaco-editor': '/node_modules/monaco-editor',30 // This alias makes sure we're avoiding a runtime error related to this package31 '@stoplight/ordered-object-literal$': '/node_modules/@stoplight/ordered-object-literal/src/index.mjs',32 },33 },34 plugins: [35 new webpack.ProvidePlugin({36 Buffer: ['buffer', 'Buffer'],37 }),38 ],39 module: {40 rules: [41 {42 test: /\.css$/,43 use: ['style-loader', 'css-loader']44 },45 /**46 * The default way in which webpack loads wasm files won’t work in a worker,47 * so we will have to disable webpack’s default handling of wasm files and48 * then fetch the wasm file by using the file path that we get using file-loader.49 *50 * Resource: https://pspdfkit.com/blog/2020/webassembly-in-a-web-worker/51 *52 * Alternatively, WASM file can be bundled directly into JavaScript bundle as data URLs.53 * This configuration reduces the complexity of WASM file loading54 * but increases the overal bundle size:55 *56 * {57 * test: /\.wasm$/,58 * type: 'asset/inline',59 * }60 */61 {62 test: /\.wasm$/,63 loader: 'file-loader',64 type: 'javascript/auto', // this disables webpacks default handling of wasm65 },66 ]67 }68};
替代的 webpack.config.js (webpack@5)
我们已经为您构建了 Web Workers 片段,它们位于我们的 npm 分发包的 dist/umd/
目录中。为了避免构建 Web Worker 片段的复杂性,您可以直接使用这些片段。此设置适用于**生产**和**开发**(webpack-dev-server)环境,并将显著缩短您的构建过程。
安装 copy-webpack-plugin
和其他所需的依赖项。
1 $ npm i copy-webpack-plugin --save-dev2 $ npm i stream-browserify --save-dev3 $ npm i https-browserify --save-dev4 $ npm i stream-http --save-dev5 $ npm i util --save-dev
1const path = require('path');2const webpack = require('webpack');3const CopyWebpackPlugin = require('copy-webpack-plugin');4
5module.exports = {6 mode: 'production',7 entry: {8 app: './index.js',9 },10 output: {11 globalObject: 'self',12 filename: 'static/js/[name].js',13 path: path.resolve(__dirname, 'dist')14 },15 resolve: {16 fallback: {17 path: false,18 fs: false,19 http: require.resolve('stream-http'), // required for asyncapi parser20 https: require.resolve('https-browserify'), // required for asyncapi parser21 stream: require.resolve('stream-browserify'),22 util: require.resolve('util'),23 url: require.resolve('url'),24 zlib: false,25 },26 alias: {27 // This alias make sure we don't pull two different versions of monaco-editor28 'monaco-editor': '/node_modules/monaco-editor',29 // This alias makes sure we're avoiding a runtime error related to this package30 '@stoplight/ordered-object-literal$': '/node_modules/@stoplight/ordered-object-literal/src/index.mjs',31 }32 },33 plugins: [34 new webpack.ProvidePlugin({35 Buffer: ['buffer', 'Buffer'],36 }),37 new CopyWebpackPlugin({38 patterns: [39 {40 from: 'node_modules/swagger-editor/dist/umd/apidom.worker.js',41 to: 'static/js',42 },43 {44 from: 'node_modules/swagger-editor/dist/umd/editor.worker.js',45 to: 'static/js',46 }47 ]48 }),49 ],50 module: {51 rules: [52 {53 test: /\.css$/,54 use: ['style-loader', 'css-loader']55 },56 ]57 }58};
开发
先决条件
假设先决条件已安装,本仓库运行所需的最低版本是 Node.js >=20.3.0
和 npm >=9.6.7
,但我们建议使用 Node.js@20 的最新版本。
设置
如果您使用 nvm,在此仓库中运行以下命令将自动为您选择正确的 Node.js 版本
1 $ nvm use
运行以下命令以设置仓库进行本地开发
1 $ git clone https://github.com/swagger-api/swagger-editor.git2 $ cd swagger-editor3 $ git checkout next4 $ git submodule init5 $ git submodule update6 $ npm i7 $ npm start
npm 脚本
代码检查
1 $ npm run lint
运行单元和集成测试
1 $ npm test
运行 E2E Cypress 测试
在开发环境中使用
1 $ npm run cy:dev
在持续集成 (CI) 环境中使用
1 $ npm run cy:ci
构建
1 $ npm run build
此脚本将构建所有 SwaggerEditor 构建工件 - app
、esm
和 umd
。
构建工件
构建工件后,将创建两个新目录:build/
和 dist/
。
build/
1$ npm run build:app2$ npm run build:app:serve
构建并提供独立的 SwaggerEditor 应用程序及其所有资产,地址为 http://localhost:3050/
。
dist/esm/
1$ npm run build:bundle:esm
此捆绑包适用于第三方使用,他们希望在自己的应用程序中将 SwaggerEditor 用作库,并拥有自己的构建过程。
dist/umd/
1$ npm run build:bundle:umd
SwaggerEditor UMD 捆绑包在全局对象上导出 SwaggerEditor 符号。它与定义为外部的 React 一起捆绑。这允许消费者使用自己的 React + ReactDOM 版本并延迟挂载 SwaggerEditor。
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 <meta7 name="description"8 content="SwaggerEditor"9 />10 <title>SwaggerEditor</title>11 <link rel="stylesheet" href="./swagger-editor.css" />12</head>13<body>14 <div id="swagger-editor"></div>15 <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>16 <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>17 <script src="./dist/umd/swagger-editor.js"></script>18 <script>19 const props = {20 url: 'https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml',21 };22 const element = React.createElement(SwaggerEditor, props);23 const domContainer = document.querySelector('#swagger-editor');24
25 ReactDOM.render(element, domContainer);26 </script>27</body>28</html>
npm
SwaggerEditor 作为 swagger-editor@5
npm 包在 npmjs.com 上发布。也可以通过运行以下命令手动生成包(假设您已遵循设置步骤)
1 $ npm run build:bundle:esm2 $ npm run build:bundle:umd3 $ npm pack
包映射
SwaggerEditor 在 package.json
文件中以以下方式映射其构建工件
1"unpkg": "./dist/umd/swagger-editor.js",2"module": "./dist/esm/swagger-editor.js",3"browser": "./dist/esm/swagger-editor.js",4"jsnext:main": "./dist/esm/swagger-editor.js",5"exports": {6 "./package.json": "./package.json",7 "./swagger-editor.css": "./dist/swagger-editor.css",8 ".": {9 "browser": "./dist/esm/swagger-editor.js"10 },11 "./plugins/*": {12 "browser": "./dist/esm/plugins/*/index.js"13 },14 "./presets/*": {15 "browser": "./dist/esm/presets/*/index.js"16 },17 "./apidom.worker": {18 "browser": "./dist/esm/apidom.worker.js"19 },20 "./editor.worker": {21 "browser": "./dist/esm/editor.worker.js"22 }23}
要了解有关这些字段的更多信息,请参阅 webpack mainFields 文档或Node.js 模块:包文档。
文档
使用旧版 React
[!重要] 较旧版本特指
React >=17 <18
。
默认情况下,swagger-editor@5 npm 包附带最新版本的 React@18。可以使用 swagger-editor@5 npm 包与旧版 React 配合使用。
假设我的应用程序与 swagger-editor@5 npm 包集成并使用 React@17.0.2。
npm
为了告知 swagger-editor@5
npm 包我要求它使用我的 React 版本,我需要使用npm overrides。
1{2 "dependencies": {3 "react": "=17.0.2",4 "react-dom": "=17.0.2"5 },6 "overrides": {7 "swagger-editor": {8 "react": "$react",9 "react": "$react-dom",10 "react-redux": "^8"11 }12 }13}
[!注意] React 和 ReactDOM 覆盖被定义为对依赖项的引用。由于 react-redux@9 仅支持
React >= 18
,我们需要使用 react-redux@8。
yarn
为了告知 swagger-editor@5
npm 包我要求它使用我的特定 React 版本,我需要使用yarn resolutions。
1{2 "dependencies": {3 "react": "17.0.2",4 "react-dom": "17.0.2"5 },6 "resolutions": {7 "swagger-editor/react": "17.0.2",8 "swagger-editor/react-dom": "17.0.2",9 "swagger-editor/react-redux": "^8"10 }11}
[!注意] React 和 ReactDOM 的解析不能定义为对依赖项的引用。不幸的是,yarn 不像 npm 那样支持
$react
或$react-dom
这样的别名。您需要指定确切的版本。
定制
环境变量
可以使用环境变量来指定本地 JSON/YAML 文件或远程 URL,供 SwaggerEditor 在启动时加载。这些环境变量将在构建时被嵌入到构建工件中。
当前可用的环境变量
变量名 | 描述 |
---|---|
REACT_APP_DEFINITION_FILE | 指定一个本地文件路径,并且指定的文件也必须存在于 /public/static 目录中 |
REACT_APP_DEFINITION_URL | 指定一个远程 URL。此环境变量目前优先于 REACT_APP_SWAGGER_FILE |
REACT_APP_VERSION | 指定此应用程序的版本。版本从 package.json 文件中读取。 |
环境变量示例值可在 .env
文件中找到。有关使用环境变量的更多信息,请参阅 Create React App 文档的添加自定义环境变量部分。
在 SwaggerUI 中使用预览插件
SwaggerEditor 附带了一些 preview
插件,它们负责渲染在编辑器中创建的定义。这些插件包括
- EditorPreviewAsyncAPIPlugin - AsyncAPI 规范渲染支持
- EditorPreviewAPIDesignSystemsPlugin - API 设计系统渲染支持
稍作调整,我们可以将这些插件与 SwaggerUI 结合使用,以提供使用 SwaggerUI 渲染 AsyncAPI 或 API 设计系统定义的能力。
1import SwaggerUI from 'swagger-ui';2import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset';3import 'swagger-editor/swagger-editor.css';4import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';5import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';6import EditorPreviewAPIDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';7import SwaggerUIAdapterPlugin from 'swagger-editor/plugins/swagger-ui-adapter';8
9SwaggerUI({10 url: 'https://petstore.swagger.io/v2/swagger.json',11 dom_id: '#swagger-ui',12 presets: [SwaggerUI.presets.apis, SwaggerUIStandalonePreset],13 plugins: [14 EditorContentTypePlugin,15 EditorPreviewAsyncAPIPlugin,16 EditorPreviewAPIDesignSystemsPlugin,17 SwaggerUIAdapterPlugin,18 SwaggerUI.plugins.DownloadUrl,19 ],20});
这里的关键是 SwaggerUIAdapter
插件,它使 SwaggerEditor 插件能够直接与 SwaggerUI 配合使用。
独立模式
SwaggerUI 也支持独立模式。在独立模式下,您将获得一个带有输入框的 TopBar
,可以在其中提供定义 URL,然后 SwaggerUI 将加载此定义。
1import SwaggerUI from 'swagger-ui';2import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset';3import 'swagger-ui/dist/swagger-ui.css';4import 'swagger-editor/swagger-editor.css';5import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';6import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';7import EditorPreviewAPIDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';8import SwaggerUIAdapterPlugin from 'swagger-editor/plugins/swagger-ui-adapter';9
10SwaggerUI({11 url: 'https://petstore.swagger.io/v2/swagger.json',12 dom_id: '#swagger-ui',13 presets: [SwaggerUI.presets.apis, SwaggerUIStandalonePreset],14 plugins: [15 EditorContentTypePlugin,16 EditorPreviewAsyncAPIPlugin,17 EditorPreviewAPIDesignSystemsPlugin,18 SwaggerUIAdapterPlugin,19 SwaggerUI.plugins.DownloadUrl,20 ],21 layout: 'StandaloneLayout',22});
通过 unpkg.com 利用预览插件
可以通过 unpkg.com 以无需构建的方式利用预览插件,来创建支持多规范的独立版 SwaggerUI。
1<!DOCTYPE html>2<html >3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 <meta name="theme-color" content="#000000" />7 <meta name="description" content="SwaggerUIMultifold" />8 <link rel="stylesheet" href="//unpkg.com/swagger-editor@5.0.0-alpha.86/dist/swagger-editor.css" />9 </head>10 <body style="margin:0; padding:0;">11 <section id="swagger-ui"></section>12
13 <script src="//unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-bundle.js"></script>14 <script src="//unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-standalone-preset.js"></script>15 <script>16 ui = SwaggerUIBundle({});17 // expose SwaggerUI React globally for SwaggerEditor to use18 window.React = ui.React;19 </script>20 <script src="//unpkg.com/swagger-editor@5.0.0-alpha.86/dist/umd/swagger-editor.js"></script>21 <script>22 SwaggerUIBundle({23 url: 'https://petstore3.swagger.io/api/v3/openapi.json',24 dom_id: '#swagger-ui',25 presets: [26 SwaggerUIBundle.presets.apis,27 SwaggerUIStandalonePreset,28 ],29 plugins: [30 SwaggerEditor.plugins.EditorContentType,31 SwaggerEditor.plugins.EditorPreviewAsyncAPI,32 SwaggerEditor.plugins.EditorPreviewApiDesignSystems,33 SwaggerEditor.plugins.SwaggerUIAdapter,34 SwaggerUIBundle.plugins.DownloadUrl,35 ],36 layout: 'StandaloneLayout',37 });38 </script>39 </body>40</html>
组合定制的 SwaggerEditor 版本
SwaggerEditor 只是与 swagger-ui-react 一起使用的一些 SwaggerUI 插件的集合。可以通过将单个插件与 swagger-ui 和 swagger-ui-react 组合来创建自定义的 SwaggerEditor 版本。
插件
可用插件列表
- dialogs
- dropdown-menu
- dropzone
- editor-content-fixtures
- editor-content-origin
- editor-content-persistence
- editor-content-read-only
- editor-content-type
- editor-monaco
- editor-monaco-language-apidom
- editor-preview
- editor-preview-api-design-systems
- editor-preview-asyncapi
- editor-preview-swagger-ui
- editor-safe-render
- editor-textarea
- layout
- modals
- splash-screen
- swagger-ui-adapter
- top-bar
- versions
可以通过以下方式导入单个插件
1import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';2import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';
预设
除插件外,预设也可用。预设是旨在协同工作以提供复合功能的插件集合。
可用预设列表
- textarea
- monaco
可以通过以下方式导入单个预设
1import TextareaPreset from 'swagger-editor/presets/textarea';2import MonacoPreset from 'swagger-editor/presets/monaco';
注意:请参阅 SwaggerUI 的扩展点文档,了解如何将预设传递给 SwaggerUI。
与 swagger-ui 组合
1import SwaggerUI from 'swagger-ui';2import 'swagger-ui/dist/swagger-ui.css';3import ModalsPlugin from 'swagger-editor/plugins/modals';4import DialogsPlugin from 'swagger-editor/plugins/dialogs';5import DropdownMenuPlugin from 'swagger-editor/plugins/dropdown-menu';6import DropzonePlugin from 'swagger-editor/plugins/dropzone';7import VersionsPlugin from 'swagger-editor/plugins/versions';8import EditorTextareaPlugin from 'swagger-editor/plugins/editor-textarea';9import EditorMonacoPlugin from 'swagger-editor/plugins/editor-monaco';10import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';11import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';12import EditorContentOriginPlugin from 'swagger-editor/plugins/editor-content-origin';13import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';14import EditorContentPersistencePlugin from 'swagger-editor/plugins/editor-content-persistence';15import EditorContentFixturesPlugin from 'swagger-editor/plugins/editor-content-fixtures';16import EditorPreviewPlugin from 'swagger-editor/plugins/editor-preview';17import EditorPreviewSwaggerUIPlugin from 'swagger-editor/plugins/editor-preview-swagger-ui';18import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';19import EditorPreviewApiDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';20import TopBarPlugin from 'swagger-editor/plugins/top-bar';21import SplashScreenPlugin from 'swagger-editor/plugins/splash-screen';22import LayoutPlugin from 'swagger-editor/plugins/layout';23import EditorSafeRenderPlugin from 'swagger-editor/plugins/editor-safe-render';24
25SwaggerUI({26 url: 'https://petstore.swagger.io/v2/swagger.json',27 dom_id: '#swagger-editor',28 plugins: [29 ModalsPlugin,30 DialogsPlugin,31 DropdownMenuPlugin,32 DropzonePlugin,33 VersionsPlugin,34 EditorTextareaPlugin,35 EditorMonacoPlugin,36 EditorMonacoLanguageApiDOMPlugin,37 EditorContentReadOnlyPlugin,38 EditorContentOriginPlugin,39 EditorContentTypePlugin,40 EditorContentPersistencePlugin,41 EditorContentFixturesPlugin,42 EditorPreviewPlugin,43 EditorPreviewSwaggerUIPlugin,44 EditorPreviewAsyncAPIPlugin,45 EditorPreviewApiDesignSystemsPlugin,46 TopBarPlugin,47 SplashScreenPlugin,48 LayoutPlugin,49 EditorSafeRenderPlugin,50 ],51 layout: 'StandaloneLayout',52});
与 swagger-ui-react 组合
1import React from 'react';2import ReactDOM from 'react-dom';3import SwaggerUI from 'swagger-ui-react';4import 'swagger-ui-react/swagger-ui.css';5import ModalsPlugin from 'swagger-editor/plugins/modals';6import DialogsPlugin from 'swagger-editor/plugins/dialogs';7import DropdownMenuPlugin from 'swagger-editor/plugins/dropdown-menu';8import DropzonePlugin from 'swagger-editor/plugins/dropzone';9import VersionsPlugin from 'swagger-editor/plugins/versions';10import EditorTextareaPlugin from 'swagger-editor/plugins/editor-textarea';11import EditorMonacoPlugin from 'swagger-editor/plugins/editor-monaco';12import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';13import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';14import EditorContentOriginPlugin from 'swagger-editor/plugins/editor-content-origin';15import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';16import EditorContentPersistencePlugin from 'swagger-editor/plugins/editor-content-persistence';17import EditorContentFixturesPlugin from 'swagger-editor/plugins/editor-content-fixtures';18import EditorPreviewPlugin from 'swagger-editor/plugins/editor-preview';19import EditorPreviewSwaggerUIPlugin from 'swagger-editor/plugins/editor-preview-swagger-ui';20import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';21import EditorPreviewApiDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';22import TopBarPlugin from 'swagger-editor/plugins/top-bar';23import SplashScreenPlugin from 'swagger-editor/plugins/splash-screen';24import LayoutPlugin from 'swagger-editor/plugins/layout';25import EditorSafeRenderPlugin from 'swagger-editor/plugins/editor-safe-render';26
27const SwaggerEditor = () => {28 return (29 <SwaggerUI30 url={url}31 plugins={[32 ModalsPlugin,33 DialogsPlugin,34 DropdownMenuPlugin,35 DropzonePlugin,36 VersionsPlugin,37 EditorTextareaPlugin,38 EditorMonacoPlugin,39 EditorMonacoLanguageApiDOMPlugin,40 EditorContentReadOnlyPlugin,41 EditorContentOriginPlugin,42 EditorContentTypePlugin,43 EditorContentPersistencePlugin,44 EditorContentFixturesPlugin,45 EditorPreviewPlugin,46 EditorPreviewSwaggerUIPlugin,47 EditorPreviewAsyncAPIPlugin,48 EditorPreviewApiDesignSystemsPlugin,49 TopBarPlugin,50 SplashScreenPlugin,51 LayoutPlugin,52 EditorSafeRenderPlugin,53 ]}54 layout="StandaloneLayout"55 />56 );57};58
59ReactDOM.render(<SwaggerEditor />, document.getElementById('swagger-editor'));
Docker
预构建的 DockerHub 镜像
SwaggerEditor 可作为预构建的 Docker 镜像使用,托管在 docker.swagger.io 上。
1$ docker pull docker.swagger.io/swaggerapi/swagger-editor:next-v52$ docker run -d -p 8080:80 docker.swagger.io/swaggerapi/swagger-editor:next-v5
本地构建
特权镜像:
1 $ npm run build:app2 $ docker build . -t swaggerapi/swagger-editor:next-v53 $ docker run -d -p 8080:80 swaggerapi/swagger-editor:next-v5
现在在浏览器中打开 http://localhost:8080/
。
非特权镜像:
1 $ npm run build:app2 $ docker build . -f Dockerfile.unprivileged -t swaggerapi/swagger-editor:next-v5-unprivileged3 $ docker run -d -p 8080:8080 swaggerapi/swagger-editor:next-v5-unprivileged
现在在浏览器中打开 http://localhost:8080/
。
SwaggerEditor 目前**不支持**自定义环境变量。
许可证
SwaggerEditor 采用 Apache 2.0 许可证。SwaggerEditor 附带一个明确的 NOTICE 文件,其中包含额外的法律通知和信息。
本项目使用 REUSE 规范,该规范定义了声明软件项目版权和许可的标准化方法。