Ontology Playground的5个启动脚本逐个拆解：dev、build、test与preview的完整指南-平芜编程栈

Ontology Playground的5个启动脚本逐个拆解：dev、build、test与preview的完整指南

【免费下载链接】Ontology-PlaygroundFree, open-source web app for learning about ontologies and Microsoft Fabric IQ. Explore a catalogue of pre-built ontologies, design your own visually, export as RDF/XML, and share interactive diagrams. Zero backend, fully static.项目地址: https://gitcode.com/GitHub_Trending/on/Ontology-Playground

🚀Ontology Playground是一款免费在线本体学习工具：零后端、纯静态的网页应用，帮你浏览预制本体目录、用可视化设计器创建自己的 Ontology、导出 RDF/XML 并分享交互式图表。想跑起来？只需认识package.json里的 5 个核心启动脚本——dev、build、test、preview、validate，这篇拆解指南带你逐个看懂它们的秘密。

为什么先看脚本？30秒建立全局认知

这个项目由 Vite + React + TypeScript 驱动，package.json 中的scripts字段就是它的"驾驶舱"。理解 5 个脚本的分工，你就理解了整个开发循环：写代码（dev）→ 验正确（test）→ 验数据（validate）→ 出产物（build）→ 看效果（preview）。

启动脚本一：`dev`一键启动开发服务器

npm run dev

秘密：它只是 vite.config.ts 里一行vite的快捷方式，但背后藏着开发体验的核心——

热更新：改动 src/components/ 下任意组件，浏览器毫秒级刷新；
OAuth 代理：vite.config.ts 配置了/__github代理，因为 GitHub OAuth 设备流接口不支持 CORS，本地开发时提交目录（Catalogue）功能因此可用；
AI 构建器开关：设置VITE_ENABLE_AI_BUILDER=true还会把/api代理到本地 Functions 服务（api/）。

启动脚本二：`build`一次构建，四道工序

npm run build

这是最"重"的脚本，package.json 中它串联了四道工序：

工序	命令	作用
① 编译目录	`catalogue:build`	把 catalogue/ 下所有 RDF 编译为`public/catalogue.json`
② 编译课程	`learn:build`	把 content/learn/ 的 Markdown 编译为`public/learn.json`
③ 类型检查+打包	`tsc -b && vite build`	TypeScript 检查后用 Vite 产出`build/`目录
④ 嵌入产物	`build:embed`	单独构建可嵌入的`ontology-embed.js`库

两个值得注意的设计：

分块优化：vite.config.ts 的manualChunks把 cytoscape 图引擎、React/Zustand UI 库拆成独立 vendor 块，首屏加载更快；
双产物策略：vite.config.embed.ts 以 IIFE 格式打包src/embed.tsx，让第三方网站能用一行<script>嵌入你的本体图——配套文档见 docs/embed-guide.md。

启动脚本三：`test`用 Vitest 守住质量底线

npm test # 单次运行，适合 CI npm run test:watch # 监听模式，边写边测

测试配置在 vitest.config.ts：基于jsdom模拟浏览器环境，测试入口 src/test/setup.ts。

项目的测试文化相当扎实，随手几个例子：

src/lib/rdf/roundtrip.test.ts —— RDF 解析与序列化"回环"一致性；
src/data/questIntegrity.test.ts —— 闯关任务与查询引擎的数据完整性；
src/a11y/themeContrast.test.ts —— 可访问性对比度检查（可用test:a11y单独跑）。

启动脚本四：`preview`本地预览生产构建

npm run preview

dev 和 preview 的区别是新手最常踩的坑：dev跑的是开发服务器（未压缩、有热更新）；preview则把build/目录这个真实的产物托管到本地端口，让你提前发现"开发环境好好的，一构建就白屏"这类问题——通常是路径或资源引用错误。

启动脚本五：`validate`RDF 数据体检仪

npm run validate

前四个脚本关注"应用"，第五个关注"数据"。scripts/validate-rdf.ts 会校验 catalogue/ 全部本体加内置示例：RDF 能否解析、本体结构是否合法、命名风格是否规范，退出码 0 表示全部通过。它同时被 CI 用来把关社区贡献的 PR，配套规范见 catalogue/metadata-schema.json。

一图流：日常开发脚本工作流

场景	命令
改前端代码	`npm run dev`
提交前自测	`npm test`
新增/修改本体	`npm run validate`
发版检查	`npm run build && npm run preview`

💡上手建议：先dev看效果，再test + validate保质量，最后build + preview验产物。跑通这个循环，你就掌握了 Ontology Playground 完整的工程节奏。

📖 想深入了解本体建模本身？content/learn/ontology-fundamentals/ 里的 6 篇入门文章是最好的起点。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Ontology Playground的5个启动脚本逐个拆解：dev、build、test与preview的完整指南