常见问题

我是 Svelte 新手。应该从哪里开始？

我们认为最好的入门方式是完成交互式教程。教程中的每个步骤聚焦在一个特定方面，并且易于理解。你可以直接在浏览器中编辑和运行真实的 Svelte 组件。

五到十分钟应该足够让您入门。一个半小时应该足以完成整个教程。

我可以在哪里获得支持？

如果您的问题是关于某种语法的，可以从 参考文档 开始。

Stack Overflow 是一个流行的论坛，您可以在那里提出代码层面的问题，或者当您遇到特定错误时寻求帮助。阅读现有的带有 Svelte 标签的问题或提出你自己的问题！

还有在线论坛和聊天室，适合讨论最佳实践、应用架构或认识其他 Svelte 用户。 我们的 Discord 或 Reddit 频道 就是很好的例子。如果你有具体的代码相关问题，Stack Overflow 通常是更好的选择。

有没有第三方资源？

Svelte Society 维护了一份 书籍和视频的列表。

如何使 VS Code 对我的 .svelte 文件进行语法高亮？

Svelte 有一个 官方的 VS Code 扩展。

有没有工具可以自动格式化我的 .svelte 文件？

您可以使用 prettier 和 prettier-plugin-svelte 插件。

我如何为我的组件编写文档？

在使用 Svelte 语言服务的编辑器中，您可以使用特殊格式的注释来为组件、函数和导出项编写文档。

<script>
	/** 我们应该如何称呼用户？ */
	export let name = 'world';
</script>

<!--
@component
这是该组件的一些文档。
它将在悬停时显示。

- 您可以在这里使用 markdown。
- 您也可以在这里使用代码块。
- 用法：
  ```tsx
  <main name="Arethra">
  ```
-->
<main>
	<h1>
		你好，{name}
	</h1>
</main>

注意: 在描述您的组件的 HTML 注释中，@component 是必需的。

Svelte 可以扩展吗？

关于这个问题最终会有一篇博客文章，但在此期间，请查看 这个 issue。

有没有 UI 组件库？

有多个 UI 组件库以及独立组件。您可以在 Svelte Society 网站的 组件页面设计系统章节 找到它们。

如何测试 Svelte 应用？

您的应用程序如何构建以及逻辑如何定义将决定确保其得到适当测试的最佳方式。需要注意的是，并非所有逻辑都属于组件内部 —— 这包括数据转换、跨组件状态管理和日志记录等方面。请记住，Svelte 库有其自己的测试套件，因此您不需要编写测试来验证 Svelte 提供的实现细节。

Svelte 应用程序通常会有三种不同类型的测试：单元测试、组件测试和端到端（E2E）测试。

单元测试：专注于独立测试业务逻辑。通常是验证单个函数和边缘案例。通过最小化这些测试的覆盖范围，可以保持测试精简和快速，并且通过从 Svelte 组件中尽可能多地提取逻辑，可以使用它们覆盖更多的应用程序。在创建新的 SvelteKit项 目时，系统会询问你是否要设置 Vitest 进行单元测试。还可以使用其他多种测试运行器。

组件测试：验证 Svelte 组件在其生命周期中的挂载和交互是否符合预期，需要一个提供文档对象模型（DOM）的工具。组件可以被编译（因为 Svelte 是一个编译器，而不是普通库），并挂载以验证元素结构、监听器、状态和其他 Svelte 组件提供的功能。组件测试工具从像 jsdom 这样的内存实现，配合测试运行器 Vitest 到利用实际浏览器提供可视化测试能力的解决方案，比如 Playwright 或 Cypress。

端到端测试：为了确保用户能够与您的应用进行交互，有必要以尽可能接近生产的方式对其进行整体测试。这是通过编写端到端（E2E）测试实现的，加载并与已部署的版本交互，以模拟用户如何与您的应用进行交互。当创建一个新的 SvelteKit 项目时，系统会询问您是否希望为端到端测试设置 Playwright。还有许多其他 E2E 测试库可供使用。

一些测试入门资源：

• Svelte 测试库
• 在 Cypress 中测试 Svelte 组件
• 使用 vitest 的示例
• 使用 uvu 测试运行器与 JSDOM 的示例
• 使用 Vitest 和 Playwright 测试 Svelte 组件
• 使用 WebdriverIO 进行组件测试

有没有路由器？

官方路由库是 SvelteKit。SvelteKit 提供了一个文件系统路由、服务端渲染（SSR）和热模块重载（HMR）一体化的易用包。它与 React 的 Next.js 有些相似。

然而，您可以使用任何路由库。很多人使用 page.js。还有 navaid，它非常相似。还有 universal-router，它支持同构和子路由，但没有内置的历史记录支持。

如果您更喜欢声明式的 HTML 方法，有同构的 svelte-routing 库和一个叫 svelte-navigator 的分支，包含一些附加功能。

如果您需要基于哈希的客户端路由，可以查看 svelte-spa-router 或 abstract-state-router。

Routify 是另一个基于文件系统的路由器，类似于 SvelteKit 的路由器。第 3 版支持 Svelte 的原生 SSR。

您可以在 sveltesociety.dev 上查看 社区维护的路由器列表。

我如何使用 Svelte 编写移动应用？

虽然大多数移动应用都不使用 JavaScript 编写，但如果您希望在构建移动应用时利用现有的 Svelte 组件和 Svelte 知识，可以将 SvelteKit SPA 转换为移动应用，使用 Tauri 或 Capacitor。通过插件，两个平台都可以获得相机、地理定位和推送通知等移动功能。

Svelte Native 是 Svelte 4 时可用的选项，但请注意 Svelte 5 目前不支持它。Svelte Native 允许您使用包含 NativeScript UI 组件 的 Svelte 组件编写 NativeScript 应用，而不是 DOM 元素，这对来自 React Native 的用户可能比较熟悉。

我能告诉 Svelte 不要删除我的未使用样式吗？

不能。Svelte 会移除组件中的这些样式并对此发出警告，以防止可能出现的问题。

Svelte 的组件样式作用域通过生成一个唯一的类来实现，将其添加到 Svelte 控制下组件的相关元素中，然后将其添加到该组件样式的每个选择器中。当编译器无法看到样式选择器适用于哪些元素时，保留它会有两个糟糕的选择：

• 如果保留选择器并向其添加作用域类，选择器可能无法匹配组件中预期的元素，如果这些元素是由子组件或 {@html ...} 创建的，则肯定不会匹配。
• 如果保留选择器而不添加作用域类，给定的样式将成为全局样式，影响整个页面。

如果你需要设置Svelte在编译时无法识别的元素样式，您需要通过使用 :global(...) 显式选择全局样式。但您也可以将 :global(...) 仅包裹在选择器的一部分中。.foo :global(.bar) { ... } 将为出现在组件 .foo 元素内的任何 .bar 元素设置样式。只要在当前组件中有一个父元素作为起点，这样的部分全局选择器几乎总能满足你的需求。

Svelte v2 仍然可用吗？

不会再添加新特性，除非 bug 极其严重或存在某种安全漏洞，否则可能不会修复。

文档仍然可以在 这里 找到。

如何进行热模块重载？

我们推荐使用 SvelteKit，它开箱即用支持 HMR，并构建于 Vite 和 svelte-hmr 之上。还有用于 rollup 和 webpack的社区插件。