SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场svelte-development

svelte-development

前端与建站

查看项目

更新于 10-16 10:37

技能介绍

用途

本资料面向使用 Svelte 5 与 SvelteKit 构建应用的开发者，重点讲解 runes 响应式系统、现代组件写法、全栈路由与服务端逻辑、测试以及版本迁移。适用于构建 Svelte 应用、实现细粒度响应式，或使用 SvelteKit 的路由与服务端函数。

技术栈概览

资料给出的技术栈与版本参考如下：

  • Svelte 5（核心框架，5.0+）
  • SvelteKit（全栈框架，2.0+）
  • TypeScript（类型安全，5.0+）
  • Vite（构建工具，5.0+）
  • Vitest（测试，1.0+）

主要能力

Svelte 5 Runes

Runes 是带 $ 前缀的编译期宏，用于提供显式、细粒度的响应式。资料列出了核心 runes：

  • $state：响应式状态，替代 let 声明
  • $derived：计算值，替代 $: 响应式语句
  • $effect：副作用，替代 $: 副作用语句
  • $props：组件 props，替代 export let
  • $bindable：双向绑定 props，替代带 bind: 的 export let

资料展示了组件结构示例，包括使用 TypeScript 接口定义 Props、通过 $props() 解构、$state 定义状态、$derived 计算派生值、$effect 处理副作用。

状态模式部分说明了 $state 可用于原始值、对象（深层响应式）、数组，并指出直接修改（如 user.name = "Jane"、items.push(...)）是响应式的，同时提到 $state.frozen 用于冻结状态（浅层响应式）。派生值部分给出简单派生与多行复杂派生（$derived.by）的写法。副作用部分给出基本 effect、带清理函数的 effect、$effect.pre（DOM 更新前运行）与 $effect.root（不追踪依赖）的示例。

组件模式

资料覆盖：

  • 带默认值与属性展开（restProps）的 Props 写法
  • 使用 $bindable 实现双向绑定
  • Snippets（替代 slot）：children、可选 footer 等 snippet 的渲染
  • 带参数的 Snippets：配合 generics 与 Snippet<[T, number]> 的类型化列表渲染

共享状态（.svelte.ts 文件）

资料给出在 .svelte.ts 文件中创建共享状态的两种方式：工厂函数（如 createCounter，返回带 getter 的对象与单例）与基于 class 的状态（如 UserStore，包含 $state 字段、$derived 计算属性、异步 login 与 logout 方法），并展示在组件中导入使用的方式。

SvelteKit（全栈）

资料给出项目结构示例（routes、+page.svelte、+page.server.ts、+layout.svelte、动态路由 [id]、+server.ts API 路由、$lib 别名、static、svelte.config.js）。

  • 加载函数：+page.server.ts 中的 PageServerLoad 示例，包括 fetch、错误抛出、返回数据；页面组件通过 $props() 接收 data。
  • 表单动作：Actions 示例，包含表单数据读取、校验（fail）、认证、设置 cookie 与 redirect；页面中使用 use:enhance 与 form 数据展示错误。
  • API 路由：+server.ts 中的 RequestHandler，GET/POST 示例，含查询参数、json 响应与错误处理；动态参数路由示例。
  • 中间件（Hooks）：hooks.server.ts 中的 handle，读取 cookie 会话、设置 event.locals.user、保护路由并重定向（303）。

事件处理（Svelte 5）

  • DOM 事件使用新语法 onclick 等（替代 on:click），示例包含 oninput、onkeydown；事件修饰符改用 JavaScript（preventDefault、stopPropagation）；once 通过包装函数实现。
  • 组件事件改用回调 props（替代 createEventDispatcher），子组件定义 onSelect、onClose 等 props，父组件传入回调。

测试（Vitest）

资料给出 vitest.config.ts 配置（svelte 插件、globals、jsdom 环境、测试文件匹配），以及组件测试（@testing-library/svelte 的 render、screen、fireEvent）与 store 测试示例。

从 Svelte 4 迁移

资料给出迁移对照表（如 let count = 0 → let count = $state(0)、$: → $derived/$effect、export let → $props()、on:click → onclick、<slot /> → {@render children()}、createEventDispatcher() → 回调 props），并提供迁移脚本命令：

npx sv migrate svelte-5

使用方式

资料以指南与代码示例形式组织，可按主题查阅对应写法。文中包含的配置与命令均以原文形式保留，实际使用需结合项目情况。

适用场景

  • 构建 Svelte 应用
  • 实现细粒度响应式
  • 使用 SvelteKit 路由与服务端函数
  • 从 Svelte 4 迁移到 Svelte 5

限制

资料中“Performance Benefits”表格只给出“Bundle size”表头，未提供完整内容；其余关于构建产物、性能提升幅度的具体数据暂未提供。资料未涉及收费、价格或使用效果承诺。