常见问题

在 GitHub 上编辑此页面

我是 Svelte 新手。我应该从哪里开始？永久链接

我们认为开始的最佳方式是玩交互式教程。那里的每一步主要集中在一个特定方面，并且易于遵循。你将在浏览器中编辑和运行真正的 Svelte 组件。

五到十分钟应该足以让你上手。一个半小时应该可以完成整个教程。

我可以在哪里获得支持？永久链接

如果你的问题是关于某些语法，API 页面是一个不错的起点。

Stack Overflow 是一个热门论坛，用于询问代码级问题或在遇到特定错误时寻求帮助。阅读标记为 Svelte 的现有问题或 提出您自己的问题！

有在线论坛和聊天室，是讨论最佳实践、应用程序架构或只是结识其他 Svelte 用户的好地方。我们的 Discord 或 Reddit 频道 就是其中的例子。如果您有可回答的代码级问题，Stack Overflow 通常更合适。

是否有任何第三方资源？永久链接

Svelte Society 维护着 书籍和视频列表。

如何让 VS Code 对我的 .svelte 文件进行语法高亮？永久链接

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

是否有工具可以自动格式化我的 .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:
  ```tsx
  <main name="Arethra">
  ```
-->
<main>
	<h1>
		Hello, {name}
	</h1>
</main>

注意：描述组件的 HTML 注释中必须有 @component。

Svelte 是否可扩展？永久链接

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

是否有 UI 组件库？永久链接

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

如何测试 Svelte 应用程序？永久链接

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

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

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

组件测试：验证 Svelte 组件在其整个生命周期中按预期挂载和交互需要一个提供文档对象模型 (DOM) 的工具。组件可以编译（因为 Svelte 是一个编译器，而不是一个普通的库），并挂载以允许对元素结构、侦听器、状态和 Svelte 组件提供的所有其他功能进行断言。组件测试工具的范围从与 Vitest 等测试运行器配对的内存中实现（如 jsdom）到利用实际浏览器提供可视化测试功能的解决方案，例如 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 不要删除我未使用的样式？永久链接

不行。Svelte 会从组件中删除样式并向您发出警告，以防止出现其他问题。

Svelte 的组件样式作用域通过生成给定组件独有的类来工作，将其添加到组件中受 Svelte 控制的相关元素，然后将其添加到该组件样式中的每个选择器。当编译器无法看到样式选择器应用于哪些元素时，保留它的方法有两种，但都不好

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

如果您需要对 Svelte 在编译时无法识别的内容进行样式设置，则需要通过使用 :global(...) 明确选择全局样式。但还要记住，您只能将 :global(...) 包裹在选择器的一部分周围。.foo :global(.bar) { ... } 将对出现在组件的 .foo 元素内的任何 .bar 元素进行样式设置。只要从当前组件中有一些父元素开始，像这样的部分全局选择器几乎总能得到您想要的结果。

Svelte v2 仍然可用吗？永久链接

不再向其中添加新功能，并且可能只会修复非常讨厌的错误或存在某种安全漏洞的错误。

文档仍可在此处获得 此处。

如何执行热模块重新加载？永久链接

我们建议使用 SvelteKit，它开箱即用地支持 HMR，并且建立在 Vite 和 svelte-hmr 之上。还有针对 rollup 和 webpack 的社区插件。