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

我们认为最好的开始方式是体验交互式的教程。每一步都主要集中在一个特定方面，并且易于跟随。您将在浏览器中编辑并运行真实的 Svelte 组件。

五到十分钟应该足以让您开始使用。一个半小时应该足以让您完成整个教程。

我在哪里可以获得支持？

如果您的问题涉及到特定的语法，API 页面 是一个不错的起点。

Stack Overflow 是一个流行的论坛，可以提出代码级别的问题或者如果您遇到特定的错误。阅读通过 Svelte 标签标记的现有问题，或者提出您自己的问题！

在线论坛和聊天室是讨论最佳实践、应用程序架构或只是了解 Svelte 用户的好地方。我们的 Discord 或 Reddit 频道 是这样的例子。如果您有一个可回答的代码级别问题，Stack Overflow 通常是更好的选择。

有没有第三方资源？

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

我怎样才能让 VS Code 对我的 .svelte 文件进行语法高亮？

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

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

您可以使用带有 prettier-plugin-svelte 插件的 Prettier。

我如何记录我的组件？

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

  1. <script>
  2.   /**
  3.    * 我们应该如何称呼用户？
  4.    */
  5.   export let name = 'world';
  6. </script>
  8. <!--
  9. @component
  10. 这里是这个组件的一些文档。
  11. 当悬停时它会显示。
  13. - 您可以在这里使用 Markdown。
  14. - 您也可以在这里使用代码块。
  15. - 使用方法：
  16.   ```tsx
  17.   <main name="Arethra">

—>

Hello, {name}

```

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

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 测试库可用。

一些开始测试的资源：

有路由器吗？

官方的路由库是 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 还可用吗？

新功能不再添加到其中，而且如果它们非常糟糕或存在某种安全漏洞，bug 可能只会被修复。

文档仍然可以在这里获得。

如何进行热模块替换？

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