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

我们认为开始的最佳方式是通过互动教程进行操作。每个步骤主要关注一个特定方面，易于跟随。你将直接在浏览器中编辑和运行真实的 Svelte 组件。

五到十分钟应该足够让您开始运行。一个半小时应该能让您完成整个教程。

我在哪里可以获得支持？

如果您的问题涉及特定语法，请从参考文档开始查找。

Stack Overflow 是一个流行的论坛，用于提出代码级别的问题或如果你遇到了特定的错误。阅读带有标签 Svelte 或 提出你自己的 现有问题！

在线论坛和聊天是讨论最佳实践、应用架构或结识其他 Svelte 用户的绝佳场所。我们的Discord或Reddit 频道就是这样的例子。如果您有一个可解答的代码级别问题，Stack Overflow 通常是一个更好的选择。

有第三方资源吗？

Svelte Society maintains a list of books and videos.

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

存在一个官方 VS Code 扩展程序用于 Svelte。

有自动格式化我的 .svelte 文件的工具吗？

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

如何记录我的组件？

在支持 Svelte 语言服务器的编辑器中，您可以使用特殊格式的注释来记录组件、函数和导出。

<script>
	/** What should we call the user? */
	export let name = 'world';
</script>

<!--
@component
Here's some documentation for this component.
It will show up on hover.

- You can use markdown here.
- You can also use code blocks here.
- Usage:
  ```svelte
  <main name="Arethra">

-->

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

Svelte 是否可扩展？

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

有 UI 组件库吗？

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

如何测试 Svelte 应用程序？

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

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

单元测试：专注于独立测试业务逻辑。通常这包括验证单个函数和边缘情况。通过最小化这些测试的表面区域，它们可以保持简洁和快速，并且通过尽可能从您的 Svelte 组件中提取逻辑，更多应用功能可以使用它们进行覆盖。在创建新的 SvelteKit 项目时，您将被询问是否希望设置Vitest进行单元测试。还可以使用其他一些测试运行器。

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

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

一些开始测试的资源：

• Svelte 测试文档
• 设置 Vitest 使用 Svelte CLI
• Svelte 测试库
• Svelte 组件在 Cypress 中测试
• 示例使用 uvu 测试运行器与 JSDOM
• 测试 Svelte 组件使用 Vitest 和 Playwright
• 组件测试使用 WebdriverIO

有路由器吗？

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

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

如果您更喜欢声明式的 HTML 方法，那么有同构的Svelte-routing库以及它的一个分支Svelte-navigator，其中包含一些额外的功能。

如果您需要在客户端使用基于哈希的路由，请查看 SvelteKit 中的哈希选项、svelte-spa-router或抽象状态路由器。

路由化是另一个基于文件系统的路由器，类似于 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) { ... }将样式应用于组件内的.bar元素，这些元素位于.foo元素中。只要当前组件中存在一个父元素作为起点，这种部分全局选择器几乎总能满足您的需求。

Svelte v2 是否仍然可用？

新功能不会添加到它，并且只有在极其严重或存在某种安全漏洞的情况下，才会修复错误。

文档仍然可在此处找到。

如何进行热模块重载？

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