SVG-Edit 开发工作流指南：依赖管理、文档构建与 Playwright 测试实战

前端图形学【免费下载链接】svgeditPowerful SVG-Editor for your browser项目地址https://gitcode.com/gh_mirrors/sv/svgedit点击查看免费下载本文围绕 SVG-Edit仓库名svgedit的官方开发文档 docs/Development.md 展开系统梳理该项目从依赖更新、文档构建、编辑器本地启动到单元测试与端到端测试的完整开发流水线。你将掌握 SVG-Edit 提供的全部 npm 脚本的用途与调用时机、测试与覆盖率报告的生成与查看方式并了解这些流程在当前仓库中的真实实现package.json、vite.config.mjs、playwright.config.mjs、scripts/run-e2e.mjs。文档按照重要程度递增排序本文沿用这一脉络先介绍日常辅助脚本再深入测试链路这一最核心的开发环节。版本管理旧版本以子模块形式共存SVG-Edit 在 GitHub Pages 托管的仓库中同时提供master版本与历史版本实现方式是将旧版本以 git submodule 的形式挂载到仓库中。这样绝大多数用户克隆时无需递归拉取子模块但开发者尤其是负责发布的人可能需要npm run submodules总入口内含下面两步。npm run submodules-init非递归初始化子模块。之所以非递归是因为不希望子模块自身再包含各自的 releases 内容——子模块的releases目录只有各版本的子文件夹没有实际内容。npm run submodules-update非递归地拉取并合并变更到master。典型场景是某个未发布版本分支被先行加入后又补充了内容此时需要把增量合并回来。从当前仓库快照看package.json 中的活跃脚本已精简为 vite/vitest/Playwright 体系上述子模块类脚本属于文档描述的完整发布流程组件涉及发布自动化的实现可参考 scripts/publish.mjs 与 scripts/version-bump.mjs。构建与预览文档文档构建会在发布前自动执行但开发阶段也常用于测试期参考npm run build-docs构建文档。当前实现见 package.json为build-docs-remove用rimraf清空docs/jsdoc/与build-docs-create执行jsdoc --pedantic -c docs/jsdoc-config.js src的组合即基于 docs/jsdoc-config.js 对src目录生成 JSDoc 文档。npm run open-docs启动服务器并打开已构建的文档http://localhost:8000/docs/jsdoc/。npm run open-docs-no-start若你已在另一个终端标签页启动了start进程则只需用此命令直接打开文档。npm run build-and-open-docs先构建再打开一步到位。npm run build-and-open-docs-no-start同样跳过服务器启动适合已有start进程在跑的场景。这些*-no-start变体在 SVG-Edit 的脚本设计中反复出现其设计意图是开发服务器是共享资源多个任务文档、编辑器、测试报告可以复用一个已运行的start进程避免端口冲突与重复启动。依赖变更后必须运行的脚本SVG-Edit 将部分devDependencies直接拷贝进仓库与 npm 包而不是打包整个node_modules以便 GitHub 或 npm 托管服务直接运行。因此依赖一旦变化有两类脚本需要跟进npm run copy执行文件拷贝把依赖中的必要文件纳入仓库。当前实现见 scripts/copy-static.mjs——它把src/editor/index.html、xdomain-index.html、iife-index.html、browser-not-supported.*、svgedit.css、images、extensions以及node_modules/pathseg/pathseg.js等拷贝到dist/editor还会在COVERAGEtrue时用istanbul-lib-instrument对 svgcanvas 核心文件common/util.js、core/path.js、core/coords.js、core/recalculate.js、core/clear.js等十余个文件做插桩。npm run license-badges更新许可证徽章其内部又分两步npm run license-badge仅生成包含本项目及dependencies以及被捆绑进仓库/npm 包的devDependencies许可证信息的徽章npm run license-badge-dev仅生成devDependencies的许可证徽章。除非某个依赖的使用条款比较 restrictive不属于通常意义的开放源码否则一般无需过度关注。文档建议在更新依赖时使用npm-check-updates工具并提到仓库通过.ncurc.js配置了不应被升级的包白名单。以上脚本会在发布前自动执行测试徽章与覆盖率徽章则是在测试过程中自动生成的仓库根目录可见 badges/coverage-badge.svg 与 badges/tests-badge.svg无需手动调用。杂项脚本速查脚本用途自动化状态npm run compress-images压缩图片资源。耗时长、无需频繁执行因此不纳入常规准备流程手动npm run remark用 remark 对 Markdown 文件做 lintremark -q -f .当前优先级不高未入自动化npm run lint代码 lint。当前实现为standard .standard 风格npm test前自动执行pretestnpm run eslint-fix自动修复 lint 错误手动npm run prep测试前的准备步骤由npm test内部调用若你平时走npm run test-only不做准备也可按需单独运行npm test内自动npm run rollup编译 ESM 版 svgedit 源码的 Rollup 流程prep内自动其中prep又由两部分组成npm run prep-no-core-rollupnpm run lintnpm run build-html拷贝 ESM 的 HTML 页面并把对 ESM 脚本的引用替换为编译/rollup 后的脚本npm run build-by-config对基于 ESM 的配置文件执行 Rollup 编译。因为用户配置文件负责importsvgedit必须编译成非 ESM 才能运行同时可避免全局变量和额外的 script 标签。npm run rollup编译 ESM 版 svgedit 源码。当前仓库的构建已切换为 Vitevite.config.mjs 中定义了三个 HTML 入口src/editor/index.html、iife-index.html、xdomain-index.html构建输出到dist/editorbuild采用es与iife两种格式分别生成Editor.js与iife-Editor.js。postbuild阶段由 scripts/copy-static.mjs 与 scripts/build-extensions.mjs 完成静态资源与扩展的搬运。从命令行打开 SVG 编辑器即使已有自动化测试手动打开编辑器做实验依然很有价值。SVG-Edit 提供了四种打开方式每种都有-no-start变体用于复用已运行的start进程默认扩展的 ESM 编辑器npm run open。全部扩展的 ESM 编辑器npm run open-all-ext。注意目前该形态没有对应的自动化测试。嵌入式ESM编辑器npm run open-embedded。它会同时运行常规start与start-allow-origin——后者在另一个端口即不同 origin启动独立服务器用于跨源测试嵌入式 API。目前同样没有自动化测试且没有为非 ESM 构建嵌入式编辑器的流程。预编译rolled up版本npm run open-compiled。这是最接近生产环境的形态适合旧的非 ESM 浏览器在 ESM 浏览器中因 HTTP 请求更少而性能更佳。但它要求先运行耗时较长的prep脚本这些 open 脚本不会替你执行因为正常情况下不应直接在编译产物上开发。当前仓库的start脚本为vite dev --host --port 8000 --strictPortprestart钩子会提示svgedit is available at http://localhost:8000/src/editor/index.html生产预览则用start:e2evite preview --port 8000 --outDir dist/editor。运行环境要求见 package.json 的engines字段Node^20.19.0 || 22.12.0。读取与打开测试覆盖率报告测试过程或直接运行npm run instrument会生成 HTML 覆盖率报告可在命令行直接查看或唤起浏览器命令输出形态npm run report命令行文本报告含行号但不含所有行不如 HTML 报告详尽npm run report-summary仅汇总不含行号npm run open-cov打开 HTML 覆盖率报告标注所有行的覆盖状态npm run open-cov-no-start同上但复用已运行的start进程在当前流水线中scripts/run-e2e.mjs 的收尾会执行npx nyc report --reporter text-summary --reporter json-summary将 Playwright 收集的覆盖率以文本摘要与 JSON 摘要形式输出单元测试部分则由 Vitest 的 v8 覆盖率提供见 vite.config.mjs 的test.coverage配置覆盖src/editor/locale.js、MainMenu.js、contextmenu.js及 svgcanvas 的paint.js、dataStorage.js、path.js、recalculate.js、utilities.js等核心文件。测试与覆盖率体系这是整个开发文档中最重要的环节。对日常开发最实用的是npm run open-tests在浏览器中打开测试而顶层流程只需记住npm test与npm run test-only即可其余组件按需了解。端到端测试Playwright端到端测试已全面切换为Playwrightnpm run test:e2e会先构建应用、启动vite preview然后对http://localhost:8000/src/editor/index.html执行 Playwright 套件。实测配置见 playwright.config.mjstestDir: tests/e2e测试用例位于 tests/e2e如svgcore.spec.js、clipboard.spec.js、control-points.spec.js、export.spec.js、layers-panel.spec.js、text-tools.spec.js、zoom.spec.js等baseURL: http://localhost:8000headless: truewebServer自动执行npm run start:e2evite preview超时 180 秒并支持reuseExistingServer。运行编排在 scripts/run-e2e.mjs 中设置COVERAGEtrue、把 Playwright 浏览器缓存指向项目内node_modules/.cache/ms-playwright便于 CI 免 sudo 安装、必要时自动执行npx playwright install chromium、按源码 mtime 判断是否需要重新构建dist/editor并将 Vitest 的coverage/coverage-final.json播种给 nyc最终统一生成报告。顶层测试例程npm test无头headless测试完整流程为npm run instrument为文件插桩单独运行通常没必要除非只想得到插桩产物npm run test-no-cov若你已在上次改动后跑过instrument可单独运行npm run prep见上文npm run test-only只重跑测试适用于已插桩、已完成准备步骤的场景。由于当前测试只针对 ESM 构建如果不在意精确覆盖率、且没有改动核心代码可以直接跳过instrument甚至prep。它内部包含独立的report步骤否则测试结果不会可见地输出到命令行。其下还有npm run test-only-no-report一般不需要单独使用内含npm start启动服务器与npm run test:e2e跑 Playwrightnpm run report。npm run test-no-core-rollup与npm test相同的无头测试步骤但省去耗时的npm run rollup。如果你只修改配置文件而未改动 svgedit 核心此命令可显著提速instrumentnpm run test-no-cov-no-core-rollup同test-no-cov但不含prep里的 rollup 步骤。单元测试与当前实现对照当前仓库的npm test实际执行为vitest run --coverage node scripts/run-e2e.mjspretest先跑lint即Vitest 单元/集成测试 覆盖率 Playwright 端到端三段式。单元测试位于 tests/unit如path.test.js、recalculate.test.js、select.test.js、history.test.js、utilities.test.js等在 vite.config.mjs 中以jsdom环境、globals: true、setup 文件tests/unit/setup-vitest.js运行端到端测试则在 tests/e2e 中且 tests/visual 保留了旋转重算等视觉回归用例如compound-transform-bug.svg、rotation-recalc-demo.html。小结SVG-Edit 的开发流程围绕文档-依赖-构建-测试-发布展开子模块机制保证历史版本与master共存copy与license-badges在依赖变更后同步仓库内嵌资源与许可证信息prep/rollup完成 ESM 编译准备open-*系列覆盖开发期手动验证的四种编辑器形态而测试侧则以npm test为主线test-only、test-no-core-rollup为加速分支Playwright 负责http://localhost:8000/src/editor/index.html上的端到端验证Vitest nyc 负责单元测试与覆盖率汇总。理解这些脚本的调用层级参考 package.json 与 scripts/run-e2e.mjs即可高效介入 SVG-Edit 的日常开发与发布流程。赞分享前端图形学【免费下载链接】svgeditPowerful SVG-Editor for your browser项目地址https://gitcode.com/gh_mirrors/sv/svgedit点击查看免费下载相关推荐Kompose 开发指南从源码构建、依赖管理到 CLI 测试与 CI 的完整工作流Kompose 开发指南从源码构建、依赖管理到 CLI 测试与 CI 的完整工作流 本文以仓库 docs/development.md https://lin云原生Kubernetes容器编排开发工具CLIPaper.js 安装、构建与测试完全指南从 NPM 依赖到 Gulp 开发工作流Paper.js 安装、构建与测试完全指南从 NPM 依赖到 Gulp 开发工作流 Paper.js 是一个基于 HTML5 Canvas 的矢量图形脚本库图形学前端Velero 开发指南生成文件、单元测试与依赖管理实战Velero 开发指南生成文件、单元测试与依赖管理实战 VeleroVMware Tanzu Velero是 Kubernetes 生态中用于备份、恢复与云原生灾备存储后端上一篇ComfyUI 双卡能把采样快多少多 GPU 配置实战指南下一篇Android数据绑定终极指南为什么我们放弃DataBinding选择更优方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考