用途:本技能面向 Svelte 4 遗留代码的维护与迁移,帮助理解 Svelte 5 中仍可用(Legacy Mode)但已不推荐的旧 API,并指导迁移到 Runes。新代码应使用 Runes。
主要能力:覆盖顶层 let 自动响应式、$: 响应式语句(含拓扑排序与块级语句)、export let 声明 props 与重新导出、$$props/$$restProps、createEventDispatcher、Slots(默认/命名/slot props/$$slots)、svelte:component、svelte:self、svelte:fragment,并提供 Legacy 与 Svelte 5 的迁移对照表。
必要用法与注意:Legacy 响应式基于赋值,数组 .push()、.splice() 不触发更新,需 items = [...items, 4] 或 items = items;default slot 可访问 slot props,named slots 不可以;createEventDispatcher 已废弃,新代码用 callback props;$$slots 为编译时注入;svelte:self 需 import { svelte:self } from 'svelte'。
Svelte 3 → 4 迁移:推荐起点 npx svelte-migrate@latest svelte-4,随后 npx svelte-check 与 npm test。需核对最低版本(Node >=16、svelte ^4.0.0、@sveltejs/kit >=1.20.4、vite-plugin-svelte >=2.4.1、typescript >=5)、bundler browser condition、CJS 输出移除、createEventDispatcher 严格类型、Action 泛型、onMount 异步清理、customElement、SvelteComponentTyped 弃用、transitions 默认范围、preprocessor 顺序与 name、eslint-plugin-svelte 替换等。
适用场景:维护未迁移的 Svelte 4 项目、理解旧语法、执行 Svelte 3 到 4 升级。限制:仅覆盖 Legacy 与 Svelte 4 升级,Svelte 5 Runes 迁移见其他技能;可混合使用 Legacy 与 Runes,组件使用 $state 即进入 Runes Mode。部分细节(如具体收费、平台支持)暂未提供。