常见问题

我是 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>
	/** 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 组件提供的其他所有功能。组件测试工具的范围从类似 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 不要移除我未使用的样式？

不能。Svelte 会从组件中移除样式并向您发出警告，以防止出现其他情况下可能出现的问题。

Svelte 的组件样式作用域通过生成特定于给定组件的类、将其添加到组件中受 Svelte 控制的相关元素以及将其添加到该组件样式中的每个选择器来工作。当编译器无法查看样式选择器应用于哪些元素时，保留它的两个糟糕的选择是

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

如果您需要为 Svelte 在编译时无法识别的内容设置样式，则需要使用 :global(...) 明确选择全局样式。但也要记住，您只能围绕选择器的一部分包装 :global(...)。.foo :global(.bar) { ... } 将为组件的 .foo 元素中出现的任何 .bar 元素设置样式。只要当前组件中有一些父元素可以开始，像这样的部分全局选择器几乎总能满足您的需求。

Svelte v2 仍然可用吗？

它不会添加新功能，并且可能只会修复非常严重的错误或存在某种安全漏洞的错误。

文档仍然可用 此处。

如何进行热模块替换？

我们建议使用 SvelteKit，它开箱即用地支持 HMR，并且构建在 Vite 和 svelte-hmr 之上。也有一些社区插件可用于 rollup 和 webpack。