常见问题

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

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

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

  从哪里可以获得支持?

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

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

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

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

在使用 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 之类的库来使用真正的浏览器。

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

  有路由相关的工具库吗?

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

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

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

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

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

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

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

  Svelte v2 仍然可用吗?

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

该版本的文档在 此处

  如何实施热模块加载?

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