Skip to main content

其他

常见问题

我是 Svelte 的新手。 我应该从哪里开始？(I'm new to Svelte. Where should I start?)

我们认为最好的入门方式是通过交互式 tutorial 进行游戏。 其中的每个步骤主要集中在一个特定方面，并且很容易遵循。 你将直接在浏览器中编辑和运行真正的 Svelte 组件。

英We think the best way to get started is playing through the interactive tutorial. Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.

五到十分钟应该足以让你启动并运行。 一个半小时应该可以让你完成整个教程。

英Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.

我可以在哪里获得支持？(Where can I get support?)

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

英If your question is about certain syntax, the API page is a good place to start.

Stack Overflow 是一个流行的论坛，可以询问代码级问题或者遇到特定错误。 通读标有 Svelte 或 问你自己的 的现有问题！

英Stack Overflow is a popular forum to ask code-level questions or if you’re stuck with a specific error. Read through the existing questions tagged with Svelte or ask your own!

在线论坛和聊天是讨论最佳实践、应用架构或只是了解 Svelte 用户的好地方。 我们的 Discord 或 Reddit 通道 就是这样的例子。 如果你有可回答的代码级问题，Stack Overflow 通常更适合。

英There are online forums and chats which are a great place for discussion about best practices, application architecture or just to get to know fellow Svelte users. Our Discord or the Reddit channel are examples of that. If you have an answerable code-level question, Stack Overflow is usually a better fit.

有第三方资源吗？(Are there any third-party resources?)

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

英Svelte Society maintains a list of books and videos.

如何让 VS Code 语法高亮显示我的 .svelte 文件？(How can I get VS Code to syntax-highlight my .svelte files?)

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

英There is an official VS Code extension for Svelte.

有没有一个工具可以自动格式化我的 .svelte 文件？(Is there a tool to automatically format my .svelte files?)

你可以将 prettier 与 prettier-plugin-svelte 插件一起使用。

英You can use prettier with the prettier-plugin-svelte plugin.

如何记录我的组件？(How do I document my components?)

在使用 Svelte Language Server 的编辑器中，你可以使用特殊格式的注释来记录组件、函数和导出。

英In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.

<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>

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

英Note: The @component is necessary in the HTML comment which describes your component.

Svelte 可以扩展吗？(Does Svelte scale?)

最终将会有一篇关于此的博客文章，但与此同时，请查看 这个问题。

英There will be a blog post about this eventually, but in the meantime, check out this issue.

有 UI 组件库吗？(Is there a UI component library?)

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

英There are several UI component libraries as well as standalone components. Find them under the design systems section of the components page on the Svelte Society website.

如何测试 Svelte 应用？(How do I test Svelte apps?)

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

英How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component - this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.

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

英A Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E).

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

英Unit Tests: Focus on testing business logic in isolation. Often this is validating individual functions and edge cases. By minimizing the surface area of these tests they can be kept lean and fast, and by extracting as much logic as possible from your Svelte components more of your application can be covered using them. When creating a new SvelteKit project, you will be asked whether you would like to setup Vitest for unit testing. There are a number of other test runners that could be used as well.

组件测试： 验证 Svelte 组件在其整个生命周期中是否按预期安装和交互需要一个提供文档对象模型 (DOM) 的工具。 可以编译组件（因为 Svelte 是编译器而不是普通库）并安装组件，以允许针对元素结构、监听器、状态以及 Svelte 组件提供的所有其他功能进行断言。 组件测试工具的范围从内存中实现（如 jsdom 与测试运行程序（如 Vitest）配对）到利用实际浏览器提供可视化测试功能（如 Playwright 或 Cypress）的解决方案。

英Component Tests: Validating that a Svelte component mounts and interacts as expected throughout its lifecycle requires a tool that provides a Document Object Model (DOM). Components can be compiled (since Svelte is a compiler and not a normal library) and mounted to allow asserting against element structure, listeners, state, and all the other capabilities provided by a Svelte component. Tools for component testing range from an in-memory implementation like jsdom paired with a test runner like Vitest to solutions that leverage an actual browser to provide a visual testing capability such as Playwright or Cypress.

端到端测试： 为了确保你的用户能够与你的应用进行交互，有必要以尽可能接近生产的方式对其进行整体测试。 这是通过编写端到端 (E2E) 测试来完成的，这些测试加载应用的已部署版本并与之交互，以模拟用户如何与应用交互。 创建新的 SvelteKit 项目时，系统会询问你是否要设置 Playwright 进行端到端测试。 还有许多其他 E2E 测试库可供使用。

英End-to-End Tests: To ensure your users are able to interact with your application it is necessary to test it as a whole in a manner as close to production as possible. This is done by writing end-to-end (E2E) tests which load and interact with a deployed version of your application in order to simulate how the user will interact with your application. When creating a new SvelteKit project, you will be asked whether you would like to setup Playwright for end-to-end testing. There are many other E2E test libraries available for use as well.

开始测试的一些资源：

英Some resources for getting started with testing:

有路由吗？(Is there a router?)

官方的路由库是 SvelteKit。 SvelteKit 在一个易于使用的软件包中提供了文件系统路由、服务器端渲染 (SSR) 和热模块重新加载 (HMR)。 它与 React 的 Next.js 有相似之处。

英The official routing library is SvelteKit. SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React.

但是，你可以使用任何路由库。 很多人用 page.js。 还有 navaid，非常相似。 还有 universal-router，它与子路由同构，但没有内置历史记录支持。

英However, you can use any router library. A lot of people use page.js. There's also navaid, which is very similar. And universal-router, which is isomorphic with child routes, but without built-in history support.

如果你更喜欢声明式 HTML 方法，可以使用同构 svelte-routing 库及其一个名为 svelte-navigator 的分支，其中包含一些附加功能。

英If you prefer a declarative HTML approach, there's the isomorphic svelte-routing library and a fork of it called svelte-navigator containing some additional functionality.

如果你需要在客户端进行基于哈希的路由，请查看 svelte-spa-router 或 abstract-state-router。

英If you need hash-based routing on the client side, check out svelte-spa-router or abstract-state-router.

Routify 是另一个基于文件系统的路由，类似于 SvelteKit 的路由。 版本 3 支持 Svelte 的原生 SSR。

英Routify is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.

你可以看到 sveltesociety.dev 上社区维护的路由列表。

英You can see a community-maintained list of routers on sveltesociety.dev.

我可以告诉 Svelte 不要删除我未使用的样式吗？(Can I tell Svelte not to remove my unused styles?)

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

英No. Svelte removes the styles from the component and warns you about them in order to prevent issues that would otherwise arise.

Svelte 的组件样式作用域的工作原理是生成给定组件唯一的类，将其添加到 Svelte 控制下的组件中的相关元素，然后将其添加到该组件样式中的每个选择器。 当编译器无法看到样式选择器适用于哪些元素时，有两个不好的选择来保留它：

英Svelte's component style scoping works by generating a class unique to the given component, adding it to the relevant elements in the component that are under Svelte's control, and then adding it to each of the selectors in that component's styles. When the compiler can't see what elements a style selector applies to, there would be two bad options for keeping it:

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

如果你需要设置 Svelte 在编译时无法识别的样式，则需要使用 :global(...) 显式选择全局样式。 但还要记住，你可以仅将 :global(...) 封装在选择器的一部分周围。 .foo :global(.bar) { ... } 将为组件的 .foo 元素中出现的任何 .bar 元素设置样式。 只要当前组件中有一些父元素可以开始，像这样的部分全局选择器几乎总是能够得到你想要的东西。

英If you need to style something that Svelte can't identify at compile time, you will need to explicitly opt into global styles by using :global(...). But also keep in mind that you can wrap :global(...) around only part of a selector. .foo :global(.bar) { ... } will style any .bar elements that appear within the component's .foo elements. As long as there's some parent element in the current component to start from, partially global selectors like this will almost always be able to get you what you want.

Svelte v2 仍然可用吗？(Is Svelte v2 still available?)

新功能不会被添加到其中，并且只有在极其严重或存在某种安全漏洞的情况下才会修复错误。

英New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.

该文档仍然可用 here。

英The documentation is still available here.

如何进行模块热重载？(How do I do hot module reloading?)

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

英We recommend using SvelteKit, which supports HMR out of the box and is built on top of Vite and svelte-hmr. There are also community plugins for rollup and webpack.

上一页 自定义元素 API
下一页 辅助警告