常见问题

  我是一个 Svelte 新手。我该从哪里开始入门？

我们认为最好的入门方式是从我们提供的交互式的 Tutorial 开始。该教程中的每个小节专注讲解一个特定知识，并且易于掌握。你可以在浏览器中直接编辑并运行真正的 Svelte 组件。

通过 5 到 10 分钟的学习就能让你上手了。一个半小时应该可以学完整个教程。

  从哪里可以获得支持？

如果你的问题是关于语法方面的，请参考 API 文档 。

Stack Overflow 是一个广受欢迎的论坛，你可以提出代码方面的问题或遇到的具体的错误。请前往这个论坛去翻阅标记有 Svelte 标签的问题或 自己提问！

在线论坛和聊天室是讨论最佳实践、应用程序架构或只是结识 Svelte 同道中人的好去处。我们的 Discord 或 Reddit 频道 就是这方面的例子。如果你的问题属于具体代码上的问题，那么，去 Stack Overflow 更合适。

  有视频课程吗？

Rich Harris（Svelte 创始人）有一门课程：

• Frontend Masters

还有一些第三方提供的课程：

• Egghead
• Udemy (Note: Udemy frequently has discounts over 90%)
• Pluralsight

最后，YouTube 频道和播放列表也有教授 Svelte 的课程：

• Svelte Master
• Svelte Tutorial for Beginners by The Net Ninja

  有 Svlete 相关的书籍吗？

有一些：

• Svelte Handbook by Flavio Copes
• Svelte 3 Up and Running by Alessandro Segala
• Svelte and Sapper in Action by R. Mark Volkmann

  如果让 VS Code 高亮显示我的 .svelte 文件？

Svelte 官方的 VS Code 扩展。

  如果文档化我开发的组件？

在使用 Svelte Language Server 的编辑器中，可以使用特殊的注释对组件、函数或导出（export）的内容添加文档。

<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 对 TypeScript 的支持怎么样？

你需要安装预处理器，例如 svelte-preprocess。也可以在命令行中运行 svelte-check 做类型检查。

要在 Svelte 模板中声明反应式变量（reactive variable）的类型，请使用以下语法：

let x: number;
$: x = count + 1;

如需导入（import）类型（type）或接口（interface），请务必使用 TypeScript 的 type 修饰符：

import type { SomeInterface } from './SomeFile';

必须使用 type 修饰符，这是因为 svelte-preprocess 不知道导入（import）的是类型（type）还是值（value）。由于 svelte-preprocess 一次只能编译一个文件，并且无法知晓其它文件的存在，因此，如果导入（import）的内容不带 type 修饰符，则不能安全地删除。

  Svelte 应用程序的体积是否会膨胀？

将来我们会针对此问题写一篇文章的，现在请先查看 这个 issue。

  Svelte 有 UI 组件库吗？

有一些 UI 组件库以及独立的组件。在 Svelte Society 网站的 components section 下可以找到。

  如何测试 Svelte 应用程序？

我们建议将视图（view）逻辑和业务逻辑分开。数据转换或跨组件的状态管理最好放在 Svelte 组件外。那么，你可以像测试任何 JavaScript 函数一样测试这些部分。在测试组件时，最好是测试组件的逻辑，请记住，Svelte 库有自己的测试，你不需要对 Svelte 的内部细节进行测试。

人们一般会采用几种测试方式，但是通常顺序是编译、挂载、测试组件。从本质上讲，你需要为每个需要测试的组件创建一个包然后才能挂载（因为 svelte 是一个编译器，而不是普通的软件库）。你可以将其挂载到 JSDOM 实例上，或者也可以通过 Playwright、Puppeteer 或 Cypress 之类的库来使用真正的浏览器。

单元测试方面的入门资源：

• Svelte Testing Library
• Example using uvu test runner with JSDOM

  有路由相关的工具库吗？

官方提供的路由库是 SvelteKit，目前处于 beta 阶段。SvelteKit 是一个易于使用的软件包，内置了基于文件系统的路由、服务器端渲染（SSR）以及热模块重载（HMR）。它与 React 生态中的 Next.js 项目类似。

但是，你可以使用任何路由库。例如很多人使用 page.js。还有同类的 navaid。

如果你更喜欢声明式的 HTML，则可以使用 svelte-routing。

如果在客户端需要基于散列（hash-based）的路由，请查看 svelte-spa-router 或 abstract-state-router，对于商用软件来说是一个成熟的路由工具。

对于基于文件系统的路由，可以看看 Routify。

  如何升级采用 Svelte v2 编写的组件？

svelte-upgrade 还没有为 v2->v3 的版本升级做好准备，不过快了。

  Svelte v2 仍然可用吗？

Svelte v2 不会再添加新功能了，并且只有再出现极其严重或存在安全漏洞的 bug 时才会修复。

该版本的文档在 此处。

  如何实施热模块加载？

我们建议使用 SvelteKit，该工具开箱即支持 HMTR，并且是基于 Vite 和 svelte-hmr 构建的。还有社区开发的 rollup 和 webpack 插件可用。