尧图网页设计 
Swagger UI 开发脚本完全指南dev、build 与 test 全量命令详解【免费下载链接】swagger-uiSwagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.项目地址: https://gitcode.com/GitHub_Trending/sw/swagger-ui导读scripts.md 是 Swagger UI 仓库的“命令总表”它把项目日常开发、构建发布与质量保障所依赖的所有 npm script 一次性列清。本文以该文档为核心骨架逐条解读每条命令背后的真实作用并结合 package.json 中的 script 定义与 webpack/ 目录下的构建配置文件解释它们调用的是哪个入口、产出哪些产物、适合在什么场景下使用。读完本文你将能熟练地在 Swagger UI 源码仓库中运行开发服务器、按需构建任意 bundle、执行单元测试与端到端测试并理解这些命令与底层 webpack 配置的对应关系。运行方式与前置条件所有脚本都通过 npm 统一入口调用在仓库根目录下执行即可npm run script name例如启动开发服务器npm run dev在运行任何命令之前需要先完成依赖安装参考 开发环境搭建指南npm install仓库要求的最低运行版本为Node.js 24.19.0、npm 11.17.0建议始终使用最新的 Node.js 版本。开发类脚本让迭代循环快起来dev带热重载的开发服务器npm run dev这是开发 Swagger UI 本身时的主命令。从 package.json 可以看到它实际执行的是cross-env NODE_ENVdevelopment BABEL_ENVdevelopment BROWSERSLIST_ENVbrowser-development webpack serve --config webpack/dev.js对应配置见 webpack/dev.js启动 webpack-dev-server监听 3200 端口host设为0.0.0.0方便在虚拟机等环境内访问开启hot: true热模块替换并集成pmmmwh/react-refresh-webpack-pluginReact 组件修改后页面即时刷新无需手动刷新浏览器minimize: false、mangle: false、sourcemaps: true即不压缩、不混淆并输出可读的 sourcemap便于调试未压缩的堆栈信息入口包括swagger-ui-bundle、swagger-ui-standalone-preset、swagger-ui样式以及vendorsreact-refresh runtime静态目录指向dev-helpersHtmlWebpackPlugin以dev-helpers/index.html为模板生成页面。启动成功后浏览器打开 http://localhost:3200/ 即可看到基于 petstore 示例 渲染的界面。切换本地 API 定义开发时若想加载自己的本地定义可以修改dev-helpers/dev-helper-initializer.js中的url参数将其从远程地址替换为dev-helpers目录下的本地文件建议放在dev-helpers/examples子目录该目录已被.gitignore忽略// 修改前 url: https://petstore.swagger.io/v2/swagger.json, // 修改后 url: ./examples/your-local-api-definition.yaml,注意dev-helpers目录下的文件默认不应提交到 git除非是修复index.html、oauth2-redirect.html、dev-helper-initializer.js或新增支持文件。watch监听源码变化并重建 distnpm run watch该命令会在源码变化时重建dist目录下的核心文件。它的典型使用场景是配合 Swagger Editor 等外部项目通过npm link将本仓库链接到其他项目后watch可以持续产出最新的构建产物让外部项目始终使用你本地最新的改动。代码质量检查lint 系列脚本实际命令作用linteslint --ext .js,.jsx src test dev-helpers flavors报告 ESLint 风格错误与警告扫描src、test、dev-helpers、flavors四个目录lint-errorseslint --quiet --ext .js,.jsx src test dev-helpers flavors仅报告 ESLint 错误--quiet忽略警告lint-fixeslint ... --fix自动修复可自动处理的风格问题lint-stylesstylelint **/*.scss报告所有 SCSS 文件的 Stylelint 错误与警告lint-styles-fixstylelint **/*.scss --fix自动修复 SCSS 风格问题需要说明的是仓库的完整 lint 规则定义在 .eslintrc未在目录树中展示的根级配置文件与 stylelint.config.js 中。ESLint 规则同时作用于 PR 的测试序列因此提交代码前保持 lint 通过是很重要的如果你使用图形化编辑器建议安装对应的 ESLint 插件在编写代码时即时发现语法与风格问题。deps-check依赖体积与许可证报告npm run deps-check该脚本串联执行两步run-s deps-license deps-sizedeps-license使用license-checker将生产依赖与开发依赖的许可证信息分别导出为licenses.csv与licenses-dev.csv输出目录由config.deps_check_dir配置为.deps_checkdeps-size以webpack -p --config webpack/bundle.js --json方式打包并导出统计信息再经webpack-bundle-size-analyzer输出各依赖的体积分析文件sizes.txt。用于在发布前评估依赖的体积增量与许可证合规情况。构建类脚本按需产出各类 bundle构建命令通过 webpack/ 目录下多个独立配置文件驱动公共逻辑收敛在 _config-builder.js 中——它统一处理 Babel 转译src与node_modules/object-assign-deep内的.js/.jsx、SVG 组件化、图片内联、UMD 输出格式、Terser 压缩与 sourcemap 策略并注入版本号、Git commit 等信息。build是总入口npm run build实际执行顺序为先构建样式build-stylesheets随后用rimraf清理旧的dist/swagger-ui.js与 sourcemap最后通过run-p并行执行下面全部 bundle 构建。各子构建命令与产物对应关系如下脚本产物模块格式关键配置build-stylesheetsdist/swagger-ui.css样式webpack/stylesheets.jsSCSS → sass-loader → postcss含 autoprefixer 与 cssnano 压缩→ mini-css-extract-pluginbuild:bundledist/swagger-ui-bundle.jsUMDcommonJSwebpack/bundle.js入口src/index.jslibrary.name SwaggerUIBundle包含全部依赖同时拷贝oauth2-redirect.html/js到 distbuild:coredist/swagger-ui.jsUMDcommonJSwebpack/core.js入口src/index.jslibrary.name SwaggerUICore不包含依赖依赖需外部提供build:standalonedist/swagger-ui-standalone-preset.jsUMDcommonJSwebpack/standalone.js入口src/standalone/presets/standalone/index.jslibrary.name SwaggerUIStandalonePresetbuild:es:bundledist/swagger-ui-es-bundle.jsES2015commonjs2 输出webpack/es-bundle.js入口src/index.js包含全部依赖build:es:bundle:coredist/swagger-ui-es-bundle-core.jsESMoutputModule: truelibraryTarget: modulewebpack/es-bundle-core.js入口src/index.js不包含依赖依赖通过 ESM externals 按需引入如何选择正确的构建命令只需要浏览器直接引入的完整包build:bundle对应SwaggerUIBundle需要按需加载依赖的最小核心包build:core对应SwaggerUICore需要在 Node 环境以import方式使用 ESM 包build:es:bundle与build:es:bundle:core需要将 Swagger UI 以 React 组件方式嵌入应用build:standalone对应 Standalone Layout 预设其源码位于 src/standalone仅调整样式build-stylesheets。产物统一输出到dist目录package.json的exports字段据此定义了require/import的入口映射。测试类脚本从单元测试到端到端测试test一站式全量检查npm run test实际命令为run-s lint-errors test:unit cy:ci按顺序串行执行ESLint 仅错误检查 → Jest 单元测试 → Cypress 端到端测试CI 模式。这是提交 PR 前推荐运行的完整校验链路。test:unitJest 单元测试npm run test:unit运行配置见 config/jest/jest.unit.config.js测试环境为jest-environment-jsdom匹配test/unit目录下所有.js/.jsx文件如 test/unit/components、test/unit/core 下的用例通过test/unit/jest-shim.js与test/unit/setup.js完成环境初始化并对 SVG 文件使用jest-transform-stub打桩。端到端测试脚本说明e2e基于 Selenium 的端到端测试需要 JDK 与 Selenium场景脚本位于 test/e2e-seleniume2e-cypress使用 Cypress 的浏览器端到端测试推荐用例位于 test/e2e-cypress/e2edev-e2e-cypress开发模式启动测试服务器与 mock API打开 Cypress 运行器可手动挑选测试执行Cypress 相关的完整链路实际由cy:*系列脚本支撑cy:server # 以生产模式构建并启动 webpack-dev-server配置见 webpack/dev-e2e.js cy:mock-api # 用 json-server 在 3204 端口提供 test/e2e-selenium/db.json 的 mock 数据 cy:start # 并行启动上述两者run-p -r cy:run # 无头模式运行全部 Cypress 测试 cy:open # 打开 Cypress 交互式运行器 cy:ci # start-server-and-test等 cy:start 就绪后执行 cy:run测试配置文件见 cypress.config.js。构建产物验证artifact 测试脚本验证目标test:artifact运行 config/jest/jest.artifact.config.js 定义的产物测试匹配test/build-artifacts目录test:artifact:umd:bundle确认swagger-ui-bundle以 Function 形式导出UMD 形态正确test:artifact:es:bundle确认swagger-ui-es-bundle以 Function 形式导出test:artifact:es:bundle:core确认swagger-ui-es-bundle-core以 Function 形式导出这三条 artifact 测试用于保证发布产物的导出形态正确是构建后质量把关的最后一道闸门。附其他实用脚本除了 scripts.md 列出的命令package.json 中还提供了若干辅助脚本可配合使用脚本作用clean用rimraf清空dist目录便于干净重建serve-static在 3002 端口静态服务dist/目录start并行执行serve-static与open-static自动打开浏览器open-static通过open-cli打开 http://localhost:3002security-audit运行npm-audit-ci-wrapper做依赖安全审计security-audit:prod仅审计生产依赖阈值 lowsecurity-audit:all阈值 moderate小结Swagger UI 的脚本体系按照“开发 → 构建 → 测试”三阶段组织开发阶段以dev的热重载与 lint 系列保证迭代效率与代码质量构建阶段通过 6 个 webpack 配置webpack/ 目录产出 UMD/ESM 多种形态的 bundle 与样式文件测试阶段则以test串联 ESLint、Jest 单元测试与 Cypress 端到端测试并用 artifact 测试守护产物导出形态。理解这些命令与底层配置的对应关系无论是为 Swagger UI 贡献代码还是基于它二次开发都能事半功倍。【免费下载链接】swagger-uiSwagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.项目地址: https://gitcode.com/GitHub_Trending/sw/swagger-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Swagger UI 开发脚本完全指南：dev、build 与 test 全量命令详解
Swagger UI 开发脚本完全指南dev、build 与 test 全量命令详解【免费下载链接】swagger-uiSwagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.项目地址: https://gitcode.com/GitHub_Trending/sw/swagger-ui导读scripts.md 是 Swagger UI 仓库的“命令总表”它把项目日常开发、构建发布与质量保障所依赖的所有 npm script 一次性列清。本文以该文档为核心骨架逐条解读每条命令背后的真实作用并结合 package.json 中的 script 定义与 webpack/ 目录下的构建配置文件解释它们调用的是哪个入口、产出哪些产物、适合在什么场景下使用。读完本文你将能熟练地在 Swagger UI 源码仓库中运行开发服务器、按需构建任意 bundle、执行单元测试与端到端测试并理解这些命令与底层 webpack 配置的对应关系。运行方式与前置条件所有脚本都通过 npm 统一入口调用在仓库根目录下执行即可npm run script name例如启动开发服务器npm run dev在运行任何命令之前需要先完成依赖安装参考 开发环境搭建指南npm install仓库要求的最低运行版本为Node.js 24.19.0、npm 11.17.0建议始终使用最新的 Node.js 版本。开发类脚本让迭代循环快起来dev带热重载的开发服务器npm run dev这是开发 Swagger UI 本身时的主命令。从 package.json 可以看到它实际执行的是cross-env NODE_ENVdevelopment BABEL_ENVdevelopment BROWSERSLIST_ENVbrowser-development webpack serve --config webpack/dev.js对应配置见 webpack/dev.js启动 webpack-dev-server监听 3200 端口host设为0.0.0.0方便在虚拟机等环境内访问开启hot: true热模块替换并集成pmmmwh/react-refresh-webpack-pluginReact 组件修改后页面即时刷新无需手动刷新浏览器minimize: false、mangle: false、sourcemaps: true即不压缩、不混淆并输出可读的 sourcemap便于调试未压缩的堆栈信息入口包括swagger-ui-bundle、swagger-ui-standalone-preset、swagger-ui样式以及vendorsreact-refresh runtime静态目录指向dev-helpersHtmlWebpackPlugin以dev-helpers/index.html为模板生成页面。启动成功后浏览器打开 http://localhost:3200/ 即可看到基于 petstore 示例 渲染的界面。切换本地 API 定义开发时若想加载自己的本地定义可以修改dev-helpers/dev-helper-initializer.js中的url参数将其从远程地址替换为dev-helpers目录下的本地文件建议放在dev-helpers/examples子目录该目录已被.gitignore忽略// 修改前 url: https://petstore.swagger.io/v2/swagger.json, // 修改后 url: ./examples/your-local-api-definition.yaml,注意dev-helpers目录下的文件默认不应提交到 git除非是修复index.html、oauth2-redirect.html、dev-helper-initializer.js或新增支持文件。watch监听源码变化并重建 distnpm run watch该命令会在源码变化时重建dist目录下的核心文件。它的典型使用场景是配合 Swagger Editor 等外部项目通过npm link将本仓库链接到其他项目后watch可以持续产出最新的构建产物让外部项目始终使用你本地最新的改动。代码质量检查lint 系列脚本实际命令作用linteslint --ext .js,.jsx src test dev-helpers flavors报告 ESLint 风格错误与警告扫描src、test、dev-helpers、flavors四个目录lint-errorseslint --quiet --ext .js,.jsx src test dev-helpers flavors仅报告 ESLint 错误--quiet忽略警告lint-fixeslint ... --fix自动修复可自动处理的风格问题lint-stylesstylelint **/*.scss报告所有 SCSS 文件的 Stylelint 错误与警告lint-styles-fixstylelint **/*.scss --fix自动修复 SCSS 风格问题需要说明的是仓库的完整 lint 规则定义在 .eslintrc未在目录树中展示的根级配置文件与 stylelint.config.js 中。ESLint 规则同时作用于 PR 的测试序列因此提交代码前保持 lint 通过是很重要的如果你使用图形化编辑器建议安装对应的 ESLint 插件在编写代码时即时发现语法与风格问题。deps-check依赖体积与许可证报告npm run deps-check该脚本串联执行两步run-s deps-license deps-sizedeps-license使用license-checker将生产依赖与开发依赖的许可证信息分别导出为licenses.csv与licenses-dev.csv输出目录由config.deps_check_dir配置为.deps_checkdeps-size以webpack -p --config webpack/bundle.js --json方式打包并导出统计信息再经webpack-bundle-size-analyzer输出各依赖的体积分析文件sizes.txt。用于在发布前评估依赖的体积增量与许可证合规情况。构建类脚本按需产出各类 bundle构建命令通过 webpack/ 目录下多个独立配置文件驱动公共逻辑收敛在 _config-builder.js 中——它统一处理 Babel 转译src与node_modules/object-assign-deep内的.js/.jsx、SVG 组件化、图片内联、UMD 输出格式、Terser 压缩与 sourcemap 策略并注入版本号、Git commit 等信息。build是总入口npm run build实际执行顺序为先构建样式build-stylesheets随后用rimraf清理旧的dist/swagger-ui.js与 sourcemap最后通过run-p并行执行下面全部 bundle 构建。各子构建命令与产物对应关系如下脚本产物模块格式关键配置build-stylesheetsdist/swagger-ui.css样式webpack/stylesheets.jsSCSS → sass-loader → postcss含 autoprefixer 与 cssnano 压缩→ mini-css-extract-pluginbuild:bundledist/swagger-ui-bundle.jsUMDcommonJSwebpack/bundle.js入口src/index.jslibrary.name SwaggerUIBundle包含全部依赖同时拷贝oauth2-redirect.html/js到 distbuild:coredist/swagger-ui.jsUMDcommonJSwebpack/core.js入口src/index.jslibrary.name SwaggerUICore不包含依赖依赖需外部提供build:standalonedist/swagger-ui-standalone-preset.jsUMDcommonJSwebpack/standalone.js入口src/standalone/presets/standalone/index.jslibrary.name SwaggerUIStandalonePresetbuild:es:bundledist/swagger-ui-es-bundle.jsES2015commonjs2 输出webpack/es-bundle.js入口src/index.js包含全部依赖build:es:bundle:coredist/swagger-ui-es-bundle-core.jsESMoutputModule: truelibraryTarget: modulewebpack/es-bundle-core.js入口src/index.js不包含依赖依赖通过 ESM externals 按需引入如何选择正确的构建命令只需要浏览器直接引入的完整包build:bundle对应SwaggerUIBundle需要按需加载依赖的最小核心包build:core对应SwaggerUICore需要在 Node 环境以import方式使用 ESM 包build:es:bundle与build:es:bundle:core需要将 Swagger UI 以 React 组件方式嵌入应用build:standalone对应 Standalone Layout 预设其源码位于 src/standalone仅调整样式build-stylesheets。产物统一输出到dist目录package.json的exports字段据此定义了require/import的入口映射。测试类脚本从单元测试到端到端测试test一站式全量检查npm run test实际命令为run-s lint-errors test:unit cy:ci按顺序串行执行ESLint 仅错误检查 → Jest 单元测试 → Cypress 端到端测试CI 模式。这是提交 PR 前推荐运行的完整校验链路。test:unitJest 单元测试npm run test:unit运行配置见 config/jest/jest.unit.config.js测试环境为jest-environment-jsdom匹配test/unit目录下所有.js/.jsx文件如 test/unit/components、test/unit/core 下的用例通过test/unit/jest-shim.js与test/unit/setup.js完成环境初始化并对 SVG 文件使用jest-transform-stub打桩。端到端测试脚本说明e2e基于 Selenium 的端到端测试需要 JDK 与 Selenium场景脚本位于 test/e2e-seleniume2e-cypress使用 Cypress 的浏览器端到端测试推荐用例位于 test/e2e-cypress/e2edev-e2e-cypress开发模式启动测试服务器与 mock API打开 Cypress 运行器可手动挑选测试执行Cypress 相关的完整链路实际由cy:*系列脚本支撑cy:server # 以生产模式构建并启动 webpack-dev-server配置见 webpack/dev-e2e.js cy:mock-api # 用 json-server 在 3204 端口提供 test/e2e-selenium/db.json 的 mock 数据 cy:start # 并行启动上述两者run-p -r cy:run # 无头模式运行全部 Cypress 测试 cy:open # 打开 Cypress 交互式运行器 cy:ci # start-server-and-test等 cy:start 就绪后执行 cy:run测试配置文件见 cypress.config.js。构建产物验证artifact 测试脚本验证目标test:artifact运行 config/jest/jest.artifact.config.js 定义的产物测试匹配test/build-artifacts目录test:artifact:umd:bundle确认swagger-ui-bundle以 Function 形式导出UMD 形态正确test:artifact:es:bundle确认swagger-ui-es-bundle以 Function 形式导出test:artifact:es:bundle:core确认swagger-ui-es-bundle-core以 Function 形式导出这三条 artifact 测试用于保证发布产物的导出形态正确是构建后质量把关的最后一道闸门。附其他实用脚本除了 scripts.md 列出的命令package.json 中还提供了若干辅助脚本可配合使用脚本作用clean用rimraf清空dist目录便于干净重建serve-static在 3002 端口静态服务dist/目录start并行执行serve-static与open-static自动打开浏览器open-static通过open-cli打开 http://localhost:3002security-audit运行npm-audit-ci-wrapper做依赖安全审计security-audit:prod仅审计生产依赖阈值 lowsecurity-audit:all阈值 moderate小结Swagger UI 的脚本体系按照“开发 → 构建 → 测试”三阶段组织开发阶段以dev的热重载与 lint 系列保证迭代效率与代码质量构建阶段通过 6 个 webpack 配置webpack/ 目录产出 UMD/ESM 多种形态的 bundle 与样式文件测试阶段则以test串联 ESLint、Jest 单元测试与 Cypress 端到端测试并用 artifact 测试守护产物导出形态。理解这些命令与底层配置的对应关系无论是为 Swagger UI 贡献代码还是基于它二次开发都能事半功倍。【免费下载链接】swagger-uiSwagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.项目地址: https://gitcode.com/GitHub_Trending/sw/swagger-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考