Svelte

Svelte是一个采用编译器的UI框架，将声明式组件（HTML/CSS/JavaScript）编译为精简优化的JavaScript，在浏览器中执行最少工作量，定位为“面向我们其余人的Web开发”。

核心机制与独特优势

Svelte通过编译阶段将组件转换为高效原生代码，无需运行时框架。其编译器支持Runes（$state、$derived、$effect、$props等）作为响应式声明原语，以及模板语法（{#if}、{#each}、{#await}、{#snippet}、{@render}等）。样式默认作用域隔离，支持全局样式、自定义属性和嵌套<style>元素。特殊元素如<svelte:window>、<svelte:head>、<svelte:boundary>可直接在组件中使用。

• 编译器驱动：无运行时，输出原生JS
• Runes系统：$state/$derived/$effect等响应式原语
• 模板语法：{#if}/{#each}/{#await}/{#snippet}/{@render}
• 作用域样式：默认隔离，支持全局与嵌套
• 特殊元素：svelte:window/svelte:head/svelte:boundary等

配套工具与生态

SvelteKit是官方全栈应用框架（类似Next.js之于React），提供路由、数据加载、表单处理、服务端渲染、静态站点生成、适配器（Node/Cloudflare/Netlify/Vercel等）及零配置部署。CLI工具`sv`用于创建、添加、检查、迁移项目，支持官方和社区插件（如drizzle、tailwindcss、storybook、mdsvex）。Playground允许在浏览器中创建和分享Svelte应用。

• SvelteKit：全栈框架，含路由/数据加载/SSR/SSG
• 适配器：Node/Cloudflare/Netlify/Vercel等
• CLI `sv`：create/add/check/migrate命令
• 插件生态：drizzle/tailwindcss/storybook/mdsvex等
• Playground：在线创建与分享应用

社区与支持

Svelte由Rich-Harris创建，现由Vercel及众多捐赠者支持，全职与兼职维护者包括Conduitry、dummdidumm、trueadm等。Svelte Society组织全球线下活动，Discord社区活跃。官方提供交互式教程、迁移指南（Svelte 45）、LLM可读的纯文本文档。企业用户包括Datawrapper、Dabble、Monogram、Frontend Masters、Hugging Face、Threema等。

• 维护团队：Rich-Harris及20+核心贡献者
• 赞助方：Vercel、GitHub Sponsors、Cohere等
• 社区活动：Svelte Society全球分会
• 学习资源：交互式教程、Playground、迁移指南
• 知名用户：Datawrapper/Hugging Face/Threema等

常见问题

Q1：Svelte与SvelteKit有什么区别？

A1：Svelte是UI组件框架，负责将组件编译为原生JS；SvelteKit是基于Svelte的全栈应用框架，提供路由、数据加载、SSR、SSG、适配器等功能，类似Next.js与React的关系。

Q2：Svelte 5相比Svelte 4有哪些关键变化？

A2：Svelte 5引入了Runes系统（$state、$derived、$effect等）替代旧的`let`/`$:`响应式声明，并提供了从Svelte 4到5的迁移指南。

Q3：Svelte CLI `sv`有哪些主要命令？

A3：`sv create`创建新项目，`sv add`添加插件（如tailwindcss、drizzle），`sv check`检查代码，`sv migrate`升级项目版本。

更多同类工具与网站,可在其他框架分类继续挑选。

信息核实于 2026年7月,具体以官网为准。