在 Turborepo 中使用 SvelteKit基于 create-svelte 的文档应用开发实战指南【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址: https://gitcode.com/gh_mirrors/tu/turbo导读本文以 Turbo 仓库中with-svelte示例的 apps/docs 应用 为切入点完整讲解如何在 Turborepo 多包仓库中基于官方脚手架create-svelte创建、开发、构建和部署 SvelteKit 应用。你将掌握从项目创建、开发服务器启动、生产构建到适配器部署的完整工作流并理解docs应用如何与web应用、ui共享组件包协同工作让 SvelteKit 应用真正融入 Turbo 的任务编排与缓存体系。create-svelteSvelteKit 项目的官方脚手架docs应用由 Svelte 官方脚手架create-svelte生成见 examples/with-svelte/apps/docs/README.md它提供了创建一个全新 SvelteKit 项目所需的一切目录结构、配置文件、TypeScript 支持、路由体系以及测试基建。在 Turborepo 的with-svelte示例中docs与web两个 SvelteKit 应用都是在此基础上搭建的因此这个 README 实际上是整个示例中 Svelte 侧实战能力的最小知识单元。创建项目脚手架支持两种最常用的初始化方式# 在当前目录创建一个新的 SvelteKit 项目 npm create sveltelatest # 在 my-app 目录中创建一个新的 SvelteKit 项目 npm create sveltelatest my-app在 monorepo 场景中更贴合实际的做法是先搭建好 Turbo 仓库再在apps/目录下用脚手架生成应用骨架。从仓库目录结构可以看到docs应用包含了完整的 SvelteKit 工程文件svelte.config.js、vite.config.ts、vitest.config.ts、playwright.config.ts、eslint.config.js、tsconfig.json以及src/routes/路由目录见 examples/with-svelte/apps/docs。仓库内联的脚手架派生证据生成后的docs应用在 package.json 中直接沿用了脚手架的脚本约定devvite dev启动开发服务器buildsvelte-kit sync vite build先同步生成 SvelteKit 类型再执行生产构建previewvite preview本地预览生产构建产物check-types/checksvelte-kit sync tsc --noEmit执行 TypeScript 类型检查lint/lint:fix基于 ESLint 的代码检查test:unitvitest run运行单元测试。这些脚本与顶层 README 描述的build、check-types、lint、test:unit四个 Turbo 任务一一对应见 examples/with-svelte/README.md。安装依赖脚手架创建项目后需要安装依赖。由于with-svelte示例是一个基于 pnpm 的 monorepo根目录的packageManager为pnpm11.22.0见 examples/with-svelte/package.json在仓库根目录统一执行pnpm install当然如果你把脚手架生成的项目独立出来使用也可以选择npm install、yarn或pnpm install中的任意一种取决于你使用的包管理器。pnpm-workspace.yaml中通过catalogs集中管理了 Svelte 全家桶的版本如svelte5.x、sveltejs/kit、sveltejs/adapter-auto等保证docs、web与ui包使用完全一致的 Svelte 版本见 examples/with-svelte/pnpm-workspace.yaml。开发启动开发服务器依赖安装完成后即可启动 SvelteKit 开发服务器npm run dev # 或者启动服务器并在新浏览器标签页中打开应用 npm run dev -- --open在 Turborepo 中更推荐通过根目录脚本统一驱动。with-svelte示例根目录的 package.json 提供了pnpm dev该脚本映射为turbo run dev会同时启动docs与web两个应用的开发服务器。dev任务在 turbo.json 中被声明为cache: false且persistent: true——即开发服务器属于常驻进程不参与缓存符合开发模式的预期行为。构建生成生产版本要创建应用的 production 版本npm run build构建完成后可以用npm run preview在本地预览生产构建产物。部署适配器提示要部署你的应用可能需要为目标环境安装一个 adapter 里默认使用了sveltejs/adapter-auto它能自动适配 Vercel、Netlify、Cloudflare Pages 等主流平台如果你的目标环境不在适配器支持的范围内或需要针对特定平台做定制应切换为对应的专用适配器。Turbo 视角下的 build在 Turbo 中build任务由 turbo.json 统一编排dependsOn: [^build]声明build依赖依赖项的build任务。具体到docs应用它依赖repo/ui包见 examples/with-svelte/apps/docs/package.json因此 Turbo 会先构建ui包再构建docsinputs: [$TURBO_DEFAULT$, .env*]定义哈希输入只有这些输入变化才会导致任务重跑否则直接命中缓存outputs: [.svelte-kit/**, .turbo/**, .vercel/**, dist/**]声明构建产物目录Turbo 会缓存这些输出用于后续增量复用。类型检查check-typesSvelteKit 项目的类型检查需要先运行svelte-kit sync生成.svelte-kit目录下的环境类型再执行tsc --noEmit。docs应用的check-types脚本正是这一组合pnpm exec turbo run check-types在 turbo.json 中check-types被声明为check-types: { dependsOn: [build, ^check-types] }即类型检查依赖build任务——因为docs需要先引用ui包的构建产物与类型声明才能正确完成跨包的类型校验。这里有一个值得注意的工程细节ui包支持 Svelte runes.svelte.ts文件中的响应式状态语法这是 SvelteKit 脚手架生成的tsconfig原生不支持的因此ui包在 examples/with-svelte/README.md 中被单独声明了类型配置。以 counter.svelte.ts 为例它使用$staterune 实现了一个跨组件共享的计数器 storeimport type { Counter } from ./types; export function newCounter(): Counter { let _count $state(0); return { get count() { return _count; }, decrement() { _count - 1; }, increment() { _count 1; } }; }docs应用通过import { CounterView } from repo/ui直接使用该共享组件见 examples/with-svelte/apps/docs/src/routes/page.svelte其导出来自ui包的 exports 声明types/svelte/default均指向./src/index.tspeerDependencies 声明了svelte: 5.56.9确保共享组件运行在与应用一致的 Svelte 版本上。单元测试test:unitdocs应用配置了 Vitest 浏览器模式vitest/browser-playwright用于组件测试以及 Node 环境用于纯逻辑单元测试。见 vitest.config.tsclient项目启用 Playwright 浏览器运行src/**/*.svelte.{test,spec}.{js,ts}形式的组件测试测试 chromium headless 实例server项目使用environment: node运行src/lib/**/*.{test,spec}.{js,ts}形式的纯逻辑测试并排除.svelte测试文件。示例仓库中ui包同样为计数器组件和 store 配备了对应的 spec 测试见 examples/with-svelte/packages/ui/src/counter.svelte.spec.ts、CounterView.svelte.spec.ts以及docs应用自身的页面组件测试见 examples/with-svelte/apps/docs/src/routes/page.svelte.spec.ts。完整验证流程with-svelte示例的 README 给出了端到端验证命令见 examples/with-svelte/README.mdpnpm install pnpm exec turbo run build check-types lint这串命令依次完成安装依赖 → 构建全部应用与包 → 类型检查 → ESLint 检查。如果你想连同单元测试一起验证可以追加test:unit任务pnpm exec turbo run build check-types lint test:unit由于check-types与test:unit都声明了dependsOn: [build]Turbo 会自动保证依赖顺序先执行ui包的构建再并行执行各应用的后续任务而lint则通过dependsOn: [^lint]先对上游包做检查。部署注意事项docs应用的部署要点如下适配器选择默认使用sveltejs/adapter-auto部署到受支持平台时无需额外配置目标环境不受支持时需按 Svelte 文档的 adapters 说明更换适配器如adapter-node、adapter-static等。构建产物build任务的outputs覆盖了.svelte-kit/**、.vercel/**、dist/**等目录见 examples/with-svelte/turbo.json部署平台可直接消费这些产物。Monorepo 协同应用依赖的共享包repo/ui会先于应用构建这是 TurborepodependsOn声明保证的部署流水线中无需手工指定构建顺序。小结从create-svelte脚手架出发docs应用完整展示了 SvelteKit 项目“创建 → 安装 → 开发 → 构建 → 预览 → 部署”的全生命周期而 Turborepo 的turbo.json任务编排让build、check-types、lint、test:unit这些任务在多应用、多包之间保持正确的依赖顺序并充分复用缓存。如果你想在真实项目里复用这套组合最快捷的方式是直接以with-svelte为模板初始化npx create-turbolatest -e with-svelte随后进入新项目目录执行pnpm install pnpm exec turbo run build check-types lint验证一切正常即可开始基于 SvelteKit Turborepo 的多应用开发。【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址: https://gitcode.com/gh_mirrors/tu/turbo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
