错误与警告系统

概述

Svelte 的错误和警告系统包含两个主要组成部分：

编译时错误和警告处理 - 在组件编译过程中提供反馈。
运行时错误和警告处理 - 在应用程序执行期间提供反馈。

该系统对编译时和运行时问题采用了统一的方法，在开发模式下提供详细的消息，在生产模式下提供最小的消息以减小包的大小。

来源： packages/svelte/src/compiler/errors.js packages/svelte/src/compiler/warnings.js packages/svelte/src/internal/client/errors.js packages/svelte/src/internal/client/warnings.js

错误与警告结构

Svelte 中的所有错误和警告都遵循一致的结构，为开发者提供清晰、可操作的信息。

通用属性

属性	描述
`code`	错误的唯一标识符
`message`	人类可读的问题描述
`position`	源代码位置（行/列）
`url`	指向包含更多信息的文档的链接

错误与警告类

Svelte 使用类层次结构来管理错误和警告。

来源： packages/svelte/src/compiler/errors.js3-33 packages/svelte/src/compiler/warnings.js10-25 packages/svelte/src/compiler/utils/compile_diagnostic.js

编译时错误与警告系统

编译错误

当 Svelte 的编译器遇到阻止成功编译的无效语法或结构时，会发生编译错误。这些错误会作为异常抛出，中断编译过程。

编译错误的特点：

它们会阻止组件编译。
它们包含指向详细文档的链接。
在开发模式下，它们包含源代码中的确切位置。

示例错误函数

来源： packages/svelte/src/compiler/errors.js93-95

编译警告

警告与错误不同，它不会阻止成功编译，但会突出显示潜在问题或应予处理的不良实践。

编译警告的特点：

它们在编译过程中被收集，但不会停止编译过程。
它们会根据警告配置进行过滤。
可以使用特殊注释来忽略它们。

示例警告函数

来源： packages/svelte/src/compiler/warnings.js131-133

警告类别

Svelte 包含几种警告类别：

类别	描述	示例
辅助功能 (a11y)	可能影响残障人士的问题	使用 accesskey 属性
CSS	CSS 选择器和规则问题	未使用的 CSS 选择器
模板	HTML 模板问题	自闭合的非 void 元素
脚本	JavaScript 代码问题	非响应式更新
组件	组件结构问题	组件名称使用小写

来源： packages/svelte/src/compiler/warnings.js46-124

运行时错误与警告系统

运行时错误和警告在应用程序执行期间触发，并就编译期间无法检测到的问题提供反馈。

运行时错误

应用程序在执行过程中遇到无法恢复的问题时会抛出运行时错误。

它们会阻止进一步执行（除非被捕获）。
在开发模式下，它们包含详细的上下文信息。
在生产模式下，它们包含精简的消息。

示例运行时错误

来源： packages/svelte/src/internal/client/errors.js159-168

运行时警告

运行时警告会提醒开发者注意潜在问题，而不会中断执行。

它们会被记录到控制台。
在开发模式下，它们会以特殊样式显示，以便更容易看到。
它们可以识别可能导致错误的模式。

示例运行时警告

来源： packages/svelte/src/internal/client/warnings.js138-144

消息定义系统

Svelte 使用一个复杂的系统来定义、处理和分发错误和警告消息。

消息定义过程

Markdown 定义：消息在 `/messages` 目录下的 markdown 文件中定义。
处理：`process-messages` 脚本将其转换为代码。
生成的代码：错误和警告函数在其各自的文件中生成。
文档：为 Svelte 网站生成参考文档。

来源： packages/svelte/scripts/process-messages/index.js1-183

不同编译器阶段的错误检测

错误和警告在 Svelte 编译过程的不同阶段被检测到。

示例错误检测点

阶段	检测点	示例错误
解析	HTML 解析	未闭合的元素
解析	块解析	无效的块语法
分析	CSS 分析	无效的全局选择器
分析	脚本分析	无效的 rune 用法
转换	模板转换	可访问性问题

来源： packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js1-327

所有权验证系统

Svelte 运行时错误系统的一个关键部分是所有权验证系统，它帮助开发者理解和修复与组件属性处理相关的问题。

所有权验证器

跟踪对未声明为可绑定属性的属性的更改。
确保组件之间存在正确的绑定链。
有助于防止难以调试的响应性问题。

来源： packages/svelte/src/internal/client/dev/ownership.js1-81

错误和警告的 URL 方案

所有 Svelte 的错误和警告都包含一个指向详细文档的 URL。

https://svelte.net.cn/e/{error_code}

这为用户提供了：

详细的解释
代码示例
常见问题的解决方案

文档是从定义错误消息的 markdown 文件生成的，确保了错误反馈和文档之间的一致性。

来源: packages/svelte/src/compiler/errors.js40-46 packages/svelte/documentation/docs/98-reference/.generated/client-errors.md1-161 packages/svelte/documentation/docs/98-reference/.generated/compile-errors.md1-938

自定义警告行为

开发者可以通过编译器选项和内联注释来配置 Svelte 报告哪些警告。

使用 `svelte-ignore` 注释

要忽略代码中的特定警告，您可以使用特殊注释

编译器配置

您可以通过 Svelte 编译器选项配置警告

来源: packages/svelte/src/compiler/state.js5-45

开发与生产环境行为差异

错误和警告系统在开发和生产环境中的行为有所不同

功能	开发	生产
错误消息	详细且包含上下文	最小化且包含 URL
警告输出	带样式的控制台输出	最小化或无输出
堆栈跟踪	包含	已排除
验证检查	全部启用	仅关键

这种方法平衡了开发体验和生产环境的性能。

来源: packages/svelte/src/internal/client/errors.js4-22 packages/svelte/src/internal/client/warnings.js1-183

结论

Svelte 的错误和警告系统在整个开发过程中为开发者提供了清晰、可操作的反馈。通过将详细的编译时分析与运行时验证相结合，它有助于及早发现问题并提供解决问题的指导。

该系统在错误报告、全面的文档和灵活性方面的一致方法，使其成为维护代码质量和改善开发者体验的强大工具。