swagger editorダウンロード - swagger editorソースコードのダウンロード

swagger editor

その他のソースコード

v4.14.0 Released!

ダウンロード

⏰️ Swagger Editor の次世代バージョンをお探しですか?

SwaggerEditor は現在、次の 2 つのメジャーリリースチャネルでリリースされています。

SwaggerEditor@4 - master ブランチからリリースされ、https://editor.swagger.io/ にデプロイされます。
SwaggerEditor@5 - 次のブランチからリリースされ、https://editor-next.swagger.io/ にデプロイされます。

SwaggerEditor@5のみが OpenAPI 3.1.0 をサポートしています。 SwaggerEditor@4 は OpenAPI 3.1.0 のサポートを受けず、現時点ではレガシーとみなされます。計画では、継続的に SwaggerEditor@5 に完全に移行し、将来的には SwaggerEditor@4 を非推奨にする予定です。

⁉️ Swagger Editor の古いバージョンをお探しですか? 2.xまたは3.xブランチを参照してください。

Swagger Editor を使用すると、ブラウザ内でOpenAPI API 定義(OpenAPI 2.0 および OpenAPI 3.0.3) を JSON または YAML 形式で編集し、ドキュメントをリアルタイムでプレビューできます。その後、有効な OpenAPI 定義を生成し、完全な Swagger ツール (コード生成、ドキュメントなど) で使用できます。

新しいバージョンはゼロから作成されているため、既知の問題と未実装の機能がいくつかあります。詳細については、「既知の問題」セクションを参照してください。

このリポジトリは、2 つの異なる NPM モジュールに公開します。

swagger-editor は、依存関係を (Webpack、Browserify などを介して) 解決できるシングルページアプリケーションでの使用を目的とした従来の npm モジュールです。
swagger-editor-dist は、サーバー側プロジェクト、または npm モジュールの依存関係を解決できない Web プロジェクトで Swagger Editor を提供するために必要なものがすべて含まれている、依存関係のないモジュールです。

単一ページのアプリケーションを構築している場合は、 swagger-editor-distサイズが非常に大きいため、 swagger-editor使用することを強くお勧めします。

匿名化された分析

Swagger Editor は Scarf を使用して、匿名化されたインストール分析を収集します。これらの分析は、このライブラリの管理者をサポートするのに役立ち、インストール中にのみ実行されます。オプトアウトするには、プロジェクトのpackage.jsonで、 scarfSettings.enabledフィールドをfalseに設定します。

 // package.json
{
  // ...
  "scarfSettings": {
    "enabled": false
  }
  // ...
}

あるいは、npm パッケージをインストールする環境の一部として、環境変数SCARF_ANALYTICS falseに設定することもできます (例: SCARF_ANALYTICS=false npm install 。

役立つスクリプト

以下のスクリプトはいずれも、プロジェクトのルートディレクトリでnpm run <script name>と入力して実行できます。

現像

スクリプト名	説明
`dev`	ポート 3200 でホットリロード開発サーバーを生成します。
`deps-check`	Swagger Editor の依存関係に関するサイズとライセンスのレポートを生成します。
`lint`	ESLint スタイルのエラーと警告を報告します。
`lint-errors`	ESLint スタイルのエラーを警告なしで報告します。
`lint-fix`	スタイルエラーを自動的に修正しようとします。
`watch`	ソースコードが変更された場合は、 `/dist`内のコアファイルを再ビルドします。 `npm link`に役立ちます。

建物

スクリプト名	説明
`build`	JS および CSS アセットの新しいセットを構築し、 `/dist`に出力します。
`build:bundle`	`swagger-editor-bundle.js`のみ (commonJS) をビルドします。
`build:core`	`swagger-editor.(js\|css)`のみをビルドします (commonJS)。
`build:standalone`	`swagger-editor-standalone-preset.js`のみ (commonJS) をビルドします。
`build:stylesheets`	`swagger-editor.css`のみをビルドします。
`build:es:bundle`	`swagger-editor-es-bundle.js`のみをビルドします (es2015)。
`build:es:bundle:core`	`swagger-editor-es-bundle-core.js`のみをビルドします (es2015)。

テスト

スクリプト名	説明
`test`	Node で単体テストを実行し、Cypress のエンドツーエンドテストを実行し、エラー専用モードで ESLint を実行します。
`test:unit-mocha`	Node で Mocha ベースの単体テストを実行します。
`test:unit-jest`	Node で Jest ベースの単体テストを実行します。
`e2e`	Cypress を使用してエンドツーエンドのブラウザテストを実行します。
`lint`	ESLint テストを実行する
`test:artifact`	Jest でバンドルアーティファクトテストのリストを実行する
`test:artifact:umd:bundle`	`swagger-editor-bundle`関数としてのエクスポートを確認する単体テストを実行します。
`test:artifact:es:bundle`	`swagger-editor-es-bundle`関数としてのエクスポートを確認する単体テストを実行します。
`test:artifact:es:bundle:core`	`swagger-editor-es-bundle-core`エクスポートを関数として確認する単体テストを実行します。

ローカルで実行する

前提条件

git、任意のバージョン
Node.js >=20.3.0およびnpm >=9.6.7は、このリポジトリを実行するために最低限必要なバージョンですが、常に最新バージョンの Node.js を使用することをお勧めします。

 $ npm i --legacy-peer-deps

Node.js と npm がインストールされている場合は、 npm start実行して静的サーバーを起動できます。

それ以外の場合は、ブラウザでファイルシステムから直接index.html開くことができます。

Swagger Editor のコードを変更したい場合は、 npm run devを介して Webpack ホットリロード開発サーバーを起動できます。

ブラウザのサポート

Swagger Editor は、Chrome、Safari、Firefox、Edge の最新バージョンで動作します。

既知の問題

移行を支援するために、3.X の現在既知の問題を以下に示します。このリストは定期的に更新され、以前のバージョンで実装されなかった機能は含まれません。

Swagger UI の既知の問題にリストされているすべて。
codegen との統合はまだありません。

ドッカー

DockerHub からのイメージの実行

DockerHub に Docker イメージが公開されています。

これを使用するには、次のコマンドを実行します。

 docker pull swaggerapi/swagger-editor
docker run -d -p 80:8080 swaggerapi/swagger-editor

これにより、マシンのポート 80 で Swagger Editor (分離モード) が実行されるため、ブラウザでhttp://localhostに移動して開くことができます。

API 定義を指す URL を指定できます (CSP や CORS などのセキュリティポリシーが適用されている場合は使用できない場合があります)。

 docker run -d -p 80:8080 -e URL="https://petstore3.swagger.io/api/v3/openapi.json" swaggerapi/swagger-editor

ローカルホストから独自のjsonまたはyaml定義ファイルを提供できます。

 docker run -d -p 80:8080 -v $(pwd):/tmp -e SWAGGER_FILE=/tmp/swagger.json swaggerapi/swagger-editor

注: URLとSWAGGER_FILE環境変数の両方が設定されている場合、 URLが優先され、 SWAGGER_FILEは無視されます。

アプリケーションにアクセスするためにBASE_URL変数を介して別のベース URL を指定できます。たとえば、アプリケーションをhttp://localhost/swagger-editor/で利用できるようにする場合は、次のようになります。

 docker run -d -p 80:8080 -e BASE_URL=/swagger-editor swaggerapi/swagger-editor

アプリケーションにアクセスするためにPORT変数を介して別のポートを指定できます。デフォルトは8080です。

 docker run -d -p 80:80 -e PORT=80 swaggerapi/swagger-editor

swagger-editor の使用状況を追跡するために、 GTM変数を介して Google タグマネージャー ID を指定できます。

 docker run -d -p 80:8080 -e GTM=GTM-XXXXXX swaggerapi/swagger-editor

次の環境変数を使用して、Swagger エディターで使用されるさまざまなエンドポイントをカスタマイズすることもできます。たとえば、これは独自の Swagger ジェネレーターサーバーがある場合に役立ちます。

環境変数	デフォルト値
`URL_SWAGGER2_GENERATOR`	`https://generator.swagger.io/api/swagger.json`
`URL_OAS3_GENERATOR`	`https://generator3.swagger.io/openapi.json`
`URL_SWAGGER2_CONVERTER`	`https://converter.swagger.io/api/convert`

Codegen 機能 (サーバーの生成およびクライアントの生成) を使用せずに Swagger エディターをローカルで実行する場合は、上記の環境変数をnull ( URL_SWAGGER2_CONVERTER=null ) に設定できます。

ローカルでイメージを構築して実行する

マシン上でチェックアウトされたコードを使用して Docker イメージを構築して実行するには、プロジェクトのルートディレクトリから次のコマンドを実行します。

 # Install npm packages (if needed)
npm install

# Build the app
npm run build

# Build an image
docker build -t swagger-editor .

# Run the container
docker run -d -p 80:8080 swagger-editor

ブラウザでhttp://localhostに移動すると、アプリを表示できます。

ドキュメント

OpenAPI ドキュメントのインポート
貢献する

古いバージョンの React を使用する

重要

古いバージョンとは、特にReact >=17 <18を指します。

デフォルトでは、swagger-editor@4 npm パッケージには最新バージョンの React@18 が付属しています。古いバージョンの React ではswagger-editor@4 npm パッケージを使用することができます。

私のアプリケーションがswagger-editor@4 npm パッケージと統合され、[email protected] を使用しているとします。

npm

React バージョンを使用するためにswagger-editor@4 npm パッケージが必要であることを通知するには、npm オーバーライドを使用する必要があります。

{
  "dependencies" : {
    "react" : " =17.0.2 " ,
    "react-dom" : " =17.0.2 "
  },
  "overrides" : {
    "swagger-editor" : {
      "react" : " $react " ,
      "react" : " $react-dom " ,
      "react-redux" : " ^8 "
    }
  }
}

注記

React および ReactDOM オーバーライドは、依存関係への参照として定義されます。 reverse-redux@9 はReact >= 18のみをサポートするため、 react-redux@8を使用する必要があります。

糸

特定の React バージョンを使用する必要があることをswagger-editor@4 npm パッケージに通知するには、糸の解像度を使用する必要があります。

{
  "dependencies" : {
    "react" : " 17.0.2 " ,
    "react-dom" : " 17.0.2 "
  },
  "resolutions" : {
    "swagger-editor/react" : " 17.0.2 " ,
    "swagger-editor/react-dom" : " 17.0.2 " ,
    "swagger-editor/react-redux" : " ^8 "
  }
}