图形学【免费下载链接】perfect-freehandDraw perfect pressure-sensitive freehand lines.项目地址https://gitcode.com/gh_mirrors/pe/perfect-freehand点击查看免费下载导读本文以 perfect-freehand 仓库根目录的 todo.mdModernization Todo List为骨架系统梳理了该开源项目从旧的 TypeScript 4.4 Lerna Jest esbuild技术栈向TypeScript 5.x Yarn Workspaces Lazyrepo ESLint 9 flat config Vitest Rolldown Vite现代工程栈迁移的完整路径。你将从中学到每个改造项的具体原因、落地步骤、关键配置文件写法以及如何在源码与 CI 层面验证迁移结果——这份清单既是本次迁移的记录也可作为任何中大型前端/库项目做工程化升级的通用参考模板。一、改造清单总览一份不触碰核心算法的工程现代化计划todo.md 开篇就明确了一条重要原则这些改造只涉及基础设施与工具链不会影响核心算法源码。这意味着 perfect-freehand 的手写笔迹算法getStroke及其相关函数在迁移过程中保持行为不变所有验证都可以用现有测试快照来兜底。整个清单按优先级分为四档优先级内容High升级 TypeScript、用 Lazyrepo 替换 Lerna、升级 ESLint、迁移到 Vitest、迁移到 Rolldown、迁移 Dev App 到 ViteMedium移除 Babel、现代化 CI/CD、Prettier 配置、升级 TypeDocLower补齐配置文件、改善 Git HooksHusky、升级 Dev App 依赖、package.json 清理OptionalYarn Workspaces 改进、安全与审计文档末尾还给出了按影响度汇总表todo.md与当前版本对照表todo.md展示各工具迁移后的实际版本TypeScript 5.7.0、lazyrepo 0.0.0-alpha.27、ESLint 9.x、Vitest 3.0.0、Rolldown 1.0.0-rc.2、Vite 6.0.0、TypeDoc 0.28.x、Husky 9.1.x、types/node 20.11.0。二、高优先级改造High Priority1. 升级 TypeScript4.4.2 → 5.x旧版本停留在 TypeScript 4.4.2升级目标为^5.3.0及以上。具体动作包括将typescript依赖提升至^5.x当前仓库为^5.7.0见 package.json在 tsconfig.base.json 中开启strict: true原本是关闭的复查并清理已废弃的编译器选项将types/node从^15.0.1升级到^20.x当前为^20.11.0。从当前 tsconfig.base.json 可以看到升级后的完整基线target: ES2020、module: ESNext、moduleResolution: node、lib: [dom, ES2021]、strict: true、declaration: true、sourceMap: true、isolatedModules: true、jsx: preserve等。其中isolatedModules与moduleResolution: node的配合保证了单文件转译如 Vite 基于 esbuild/Rolldown 的按需转译时类型检查仍然成立。仓库还在 packages/perfect-freehand/tsconfig.build.json 中单独配置了构建专用 tsconfig关闭composite与incremental开启declarationMap、sourceMap、emitDeclarationOnly和stripInternal用于剔除标记为internal的实现细节让产出的.d.ts更干净。2. 用 Lazyrepo 替换 LernaLerna 当时已落后 4 个大版本因此被移除。改造原则是保留 Yarn Workspaces负责依赖管理当前根 package.json 仍声明workspaces: [packages/*]引入 lazyrepo负责任务编排与缓存理由是其比 Turborepo/Nx 更简单且与 Yarn Workspaces 配合良好参考了 tldraw 项目的同款方案新建 lazy.config.js 定义 build / test / lint / start 任务删除lerna.json与lerna依赖。lazy.config.js 是本次改造的核心产物它声明了每个任务的内容寻址缓存content-addressable cache规则build输入为src/**/*、rolldown.config.mjs、package.json、tsconfig.json、tsconfig.build.json输出缓存为dist/**/*test输入为src/**/*与所有*.test.ts(x)/*.spec.ts(x)同时inheritsInputFromDependencies: true依赖包源码变化也会让本包测试缓存失效无输出产物lint输入为src/**/*与 ESLint 配置文件无输出产物startexecution: independent各 workspace 并行启动、cache: none开发模式不缓存。由于缓存存在根 package.json 中的yarn build:packages、yarn test等脚本在二次执行时会被 lazyrepo 增量跳过显著加快本地与 CI 反馈。3. 升级 ESLint 到 9.x 并迁移 flat config将eslint升级到^9.x当前^9.19.0将typescript-eslint/parser与typescript-eslint/eslint-plugin升级到^7.x或^8.x当前采用一体化包typescript-eslint^8.23.0见 package.json从.eslintrc.js迁移到 flat configeslint.config.mjs引入eslint-config-prettier当前^10.0.1关闭与 Prettier 冲突的规则。当前 eslint.config.mjs 的写法是 ESLint 9 的标准 flat config 形态通过tseslint.config()依次合并eslint.configs.recommended、typescript-eslint的 recommended 规则、eslintConfigPrettier再对**/*.ts(x)关闭typescript-eslint/explicit-module-boundary-types并忽略dist/build/node_modules。这套配置同时服务于库包packages/perfect-freehand的yarn lint指向eslint src/与 Dev App。4. 从 Jest 迁移到 Vitest迁移动机非常明确todo.md原生支持 ESM 与 TypeScript不再需要ts-jest与 Jest API 兼容测试代码几乎零改动与 Vite 集成watch 模式下享受快速 HMR。具体动作移除jest、ts-jest、types/jest将testing-library/jest-dom替换为testing-library/jest-dom/vitest入口新建 vitest.config.ts更新 package.json 的 test scripts移除不再需要的 Babel 依赖。当前 vitest.config.ts 展示了迁移后的配置要点export default defineConfig({ test: { globals: true, environment: jsdom, setupFiles: [./setupTests.ts], include: [ packages/**/src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}, ], exclude: [**/node_modules/**, **/dist/**, **/build/**], alias: { perfect-freehand: ./packages/perfect-freehand/src, }, benchmark: { include: [packages/**/src/**/*.bench.ts], }, }, })其中benchmark.include让基准测试vitest bench也能被 Vitest 统一管理——这正是仓库中 stroke.bench.ts 的运行入口。该基准覆盖getStrokePoints、getStrokeOutlinePoints、getStroke三个层级并包含 500/1000 点的合成螺旋线压力数据见 stroke.bench.ts可用于验证迁移后各代码路径的吞吐是否回退。根 package.json 中的脚本已切换为test: vitest run、test:watch: vitest、bench: vitest bench。5. 库构建迁移到 Rolldown旧方案是自定义 esbuild 脚本现在替换为Rolldown——一个基于 Rust 的打包器API 与 Rollup 兼容内置转译、压缩与 source map。todo.md 中记录的基准是构建耗时从约 40s 降到约 1.6s该数据来自 todo.md为仓库文档记录值具体数据随机器与版本而异。落地产物是 packages/perfect-freehand/rolldown.config.mjs它同时产出双格式构建CJS 构建输出到dist/cjsformat: cjsentryFileNames: [name].js开启sourcemap与minifyESM 构建输出到dist/esmformat: esmentryFileNames: [name].mjs同样开启 sourcemap 与 minify并挂载一个自定义report-size插件——该插件在writeBundle阶段统计所有 chunk 的字节数并计算主 chunk 的 gzip 体积构建完成后在控制台打印包体报告见 rolldown.config.mjs。resolve.tsconfigFilename指向./tsconfig.build.json确保构建解析与类型声明产物一致。类型声明由tsc --project tsconfig.build.json --emitDeclarationOnly --outDir dist/types单独生成见 packages/perfect-freehand/package.json。双格式产物通过exports字段暴露给消费者packages/perfect-freehand/package.jsonexports: { .: { types: ./dist/types/index.d.ts, require: ./dist/cjs/index.js, import: ./dist/esm/index.mjs } }同时删除packages/perfect-freehand/scripts/build.js与dev.js。6. Dev App 迁移到 Vite演示应用packages/dev同样从自定义 esbuild dev server 迁移到Vite理由包括快速 HMR、原生 ESM 与优秀 DXtodo.md 还提到 Vite 6 底层使用 Rolldown。新建的 packages/dev/vite.config.ts 配置要点使用vitejs/plugin-react插件root: srcdev server 端口5420构建输出到../distsourcemap: truetarget兼容chrome58 / firefox57 / safari11 / edge18通过resolve.alias把components、hooks、state映射到src下的对应目录以支持 tsconfig 的baseUrl裸导入CSS Modules 由 Vite 内置支持*.module.css自动按 CSS Modules 处理因此删除了esbuild与esbuild-css-modules-plugin依赖。packages/dev/package.json 中start: vite、build: vite build、preview: vite preview脚本与根目录yarn start经 lazyrepo 并行启动所有 workspace配合即可在本地打开演示画板调试笔画效果。三、中优先级改造Medium Priority7. Babel 依赖已无存在必要该条目最终以不再需要收尾todo.mdBabel 只服务于 Jest/ts-jest既然 Vitest 已原生处理 TypeScript 转译Babel 被整体移除同时省去了babel/*的版本升级工作。8. 现代化 CI/CD 流水线CI 主流程位于 .github/workflows/main.yml改造点全部落实actions/checkout与actions/setup-node升级到 v4用 Vitest 的原生 GitHub Actions reporter 替代mattallty/jest-github-actionv1.0.3构建任务加入 Node.js 版本矩阵20.x、22.x见 main.yml使用actions/cachev4缓存 Yarn 缓存目录key 基于yarn.lock哈希每个 job 前执行corepack enable以匹配packageManager: yarn4.12.0见根 package.jsonCI 内依次运行yarn format:check→yarn build:packages→yarn test并在 Node 20 上额外执行packages/perfect-freehand的yarn docs生成 API 文档另设独立的auditjob 执行yarn npm audit做依赖安全审计。发布流水线见 .github/workflows/publish.yml监听release的published事件构建并测试后执行npm publish ./packages/perfect-freehand --access public借助NPM_TOKEN密钥。这正对应 todo.md 中考虑增加自动化 npm 发布工作流的条目。9. Prettier 配置独立化将原本写在package.json里的 Prettier 配置抽取为 .prettierrcsingleQuote: true、semi: false、trailingComma: es5、printWidth: 80新增 .prettierignore排除node_modules/、dist/、Yarn 相关文件、锁文件、coverage/、IDE 目录以及自动生成的docs/根 package.json 增加formatprettier --write .与format:checkprettier --check .脚本format:check已接入 CI见 main.yml。10. TypeDoc 升级到 0.28.xtypedoc升级到^0.28.0见 package.json新增 packages/perfect-freehand/typedoc.json使用现代配置以src/index.ts为入口、tsconfig.build.json为编译配置、输出到docs/开启includeVersion排除private/internal/external成员并按source-order排序docs 生成步骤已加入 CImain.yml当format:check、构建与测试全部通过后自动产出 API 文档。四、低优先级与可选改造Lower Priority Optional11. 补齐缺失的配置文件.editorconfig统一编辑器行为空格缩进、indent_size 2、LF 换行、UTF-8、去尾随空白、文件末尾换行[*.md]保留尾随空白Makefile用 Tab.nvmrc内容为20固定开发 Node 主版本根 package.json 增加engines: { node: 20.0.0 }声明支持范围引入 Dependabot.github/dependabot.yml实现每周自动依赖更新npm 生态按dev-dependencies合并 minor/patch、typescript合并 typescript 与types/*、testingvitest / testing-library / jsdom、eslint分组批量升级GitHub Actions 生态单独一组。12. 完善 Git HooksHusky 9 lint-stagedhusky升级到^9.1.0根 package.json 保留prepare: husky.husky/pre-commit 执行npx lint-staged只对暂存文件做检查lint-staged 规则*.{ts,tsx,js,jsx,mjs,cjs}依次跑eslint --fix与prettier --write*.{json,md,yml,yaml,css,html}跑prettier --write.husky/pre-push 执行yarn test推送前强制通过全部测试.husky/commit-msg 执行npx --no -- commitlint --edit ${1}配合 commitlint.config.js 使用commitlint/config-conventional规范并把 body/footer 最大行长放宽到 100warning 级别。13. Dev App 依赖升级zustand从^4.0.0-rc.1升级到稳定的^5.0.0见 packages/dev/package.jsontesting-library/react从^12.0.0升级到^16.0.0Radix UI 组件radix-ui/react-checkbox、react-icons、react-label、react-slider与tldraw/*工具库同步更新到最新版本。14. package.json 清理审计并移除未使用的依赖版本说明符统一使用^以保持灵活性根 package.json 增加packageManager: yarn4.12.0字段启用 Corepack 支持复核peerDependencies库包当前无需外部 peer 依赖。15. Yarn Workspaces 改进考虑升级到 Yarn 4.xBerry当前根 package.json 的packageManager已是yarn4.12.0.yarnrc.yml 配置nodeLinker: node-modules保留 node_modules 链接方式而非默认 PnP与 lint-staged、CI 缓存等既有工具链兼容。16. 安全与审计CI 增加yarn npm auditmain.yml 中独立auditjob供应链安全由 Dependabot 兜底todo.md 注明其与 socket.dev 等方案效果类似todo.md 记录最近一次审计2026-01-30未发现已知漏洞。五、改造如何被验证测试、基准与快照由于核心算法未变整个迁移的可信度建立在三层验证之上1. 单元测试仓库的测试位于 packages/perfect-freehand/src/test其中 getStroke.spec.ts 覆盖 6 类输入空、单点、两点、两点重合、多点、含重复点并对每种输入随机生成 500 组size / thinning / streamline / smoothing / simulatePressure / last / start / end组合做断言见 getStroke.spec.ts核心断言是结果中绝不出现null保证每个输出都能直接用于 SVG path 或 CanvasPath2D。2. 快照测试__snapshots__目录中的 getStroke.spec.ts.snap、getStrokePoints.spec.ts.snap、getStrokeOutlinePoints.spec.ts.snap 锁定了迁移前后的输出逐点一致——任何微小的算法回归都会以快照差异形式暴露。3. 性能基准vitest bench运行 stroke.bench.ts对 97/302/500/1000 点数据分别测试getStrokePoints、getStrokeOutlinePoints、getStroke端到端耗时以及 taper、thinning: 0、last: true、对象数组输入等分支路径防止工具链升级引入热路径回退。此外build.mjs 负责在构建前同步根目录与库包内两份相同的 README 及 assets按修改时间取新者覆盖旧者保证发布物与仓库首页展示一致。六、给读者的迁移经验小结回看这份 todo.md可以提炼出几条通用的工程化升级经验先分离算法冻结与工具链升级perfect-freehand 明确声明核心算法不动用快照测试作为回归安全网这让大规模工具升级的试错成本大幅降低构建、测试、格式化、文档各司其职Rolldown 管库构建、tsc 管类型声明、Vitest 管测试与基准、Prettier 管格式、TypeDoc 管文档、Lazyrepo 管编排与缓存每个工具只做自己最擅长的事CI 是迁移的最终裁判从format:check到构建、测试、文档生成再到 npm 发布publish.yml全链路自动化让迁移质量可度量、可回归依赖安全常态化Dependabot 分组批量升级 CI 内yarn npm audit把供应链风险从事后排查变成持续跟踪。如果你正在规划自己的开源库或业务工程升级可以直接以 todo.md 的清单结构为模板按高/中/低/可选优先级逐项推进并参考本仓库的 lazy.config.js、vitest.config.ts、rolldown.config.mjs 与 main.yml 作为落地范本。赞分享图形学【免费下载链接】perfect-freehandDraw perfect pressure-sensitive freehand lines.项目地址https://gitcode.com/gh_mirrors/pe/perfect-freehand点击查看免费下载相关推荐如何快速掌握 Terser Webpack Plugin前端代码压缩优化完整指南如何快速掌握 Terser Webpack Plugin前端代码压缩优化完整指南 Terser Webpack Plugin 是一款强大的前端代码压缩工具专图形学Perfect-Freehand在React中的实战应用完整示例解析Perfect Freehand在React中的实战应用完整示例解析 Perfect Freehand是一个专门用于绘制完美压力感应自由手绘线条的JavaSc图形学手绘线条的终极进化Perfect-Freehand技术完整指南手绘线条的终极进化Perfect Freehand技术完整指南 Perfect Freehand是一款强大的开源库专注于绘制完美的压感手绘线条让数字绘画体图形学上一篇3分钟搞定Video Download Helper你的全能Chrome视频下载助手下一篇3个常见Palworld存档问题开源工具的终极实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考