菜单

快速入门

相关源文件

本页面为希望理解、使用和贡献 Svelte 代码库的开发者提供了指导。如果您正在寻找如何使用 Svelte 构建应用程序的文档,请参阅官方 Svelte 文档

Svelte 仓库介绍

Svelte 是一个编译器,它接收您声明式的组件,并将它们转换为高效的 JavaScript,以精确地更新 DOM。Svelte 仓库被组织为一个包含多个包和站点的单仓。

存储库结构图

来源: package.json README.md CONTRIBUTING.md

先决条件

在开始之前,请确保您已安装

  1. Node.js(如 package.json 中指定)
  2. pnpm(9.0.0 或更高版本)

Svelte 使用 pnpm 作为其包管理器,如

"packageManager": "pnpm@10.4.0",
"engines": {
  "pnpm": ">=9.0.0"
}

来源: package.json8-11

设置开发环境

1. 克隆仓库

2. 安装依赖项

这将安装 monorepo 中所有包的所有依赖项。

3. 安装 Playwright 浏览器(用于测试)

运行测试需要此步骤。

来源: .github/workflows/ci.yml40 CONTRIBUTING.md99-101 package.json16-30

项目结构

Svelte 仓库被组织为一个 monorepo,其结构如下

目录描述
packages/核心包,包括 Svelte 编译器
sites/与 Svelte 相关的网站
benchmarking/性能测试工具
.github/GitHub 配置文件和工作流

最重要的包是 packages/svelte,它包含了核心的 Svelte 编译器和运行时。

来源: package.json CONTRIBUTING.md

核心系统图

来源: packages/svelte/src/internal/flags/index.js packages/svelte/README.md

构建代码库

构建所有包

此命令将构建 packages/ 目录下的所有包。

构建特定包

开发模式

当文件更改时重新构建包

来源: package.json16-18 CONTRIBUTING.md78-80

测试

Svelte 拥有一个全面的测试套件。测试位于 /test 文件夹中,并按组件组织。

运行测试

要运行所有测试

运行特定的测试套件

运行套件中的特定测试

更新测试快照

对于与快照进行比较的测试套件

来源: CONTRIBUTING.md92-120 .github/workflows/ci.yml33-43 .github/PULL_REQUEST_TEMPLATE.md .github/workflows/release.yml

贡献工作流程

下面这张图概述了 Svelte 的典型贡献流程

来源: CONTRIBUTING.md64-166 .github/PULL_REQUEST_TEMPLATE.md CONTRIBUTING.md137-147

进行代码更改

  1. Fork 仓库并从 main 分支创建一个新分支
  2. 进行您的更改
  3. 确保使用 pnpm test 运行测试并通过
  4. 确保使用 pnpm lint 运行 linter 并通过
  5. 使用 pnpm check 运行类型检查
  6. 如果您的更改是为了版本升级而进行的特性或错误修复,请运行 npx changeset 来创建一个 changeset

拉取请求指南

  • 在 PR 标题前加上 feat:fix:chore:docs: 前缀
  • 包含 PR 所解决问题的清晰描述
  • 引用任何相关的 issue
  • 在适用时包含测试
  • 对于重要的更改,请考虑先创建一个 RFC:https://github.com/sveltejs/rfcs

来源: .github/PULL_REQUEST_TEMPLATE.md CONTRIBUTING.md137-147

常用开发命令

下表列出了开发过程中最常用的命令

命令描述
pnpm install安装所有依赖项
pnpm build构建所有包
pnpm test运行所有测试
pnpm lint运行 ESLint 和 Prettier
pnpm format运行 Prettier 来格式化代码
pnpm check运行类型检查
pnpm bench运行基准测试
npx changeset创建用于版本升级的 changeset
pnpm changeset:version根据 changesets 更新版本
pnpm changeset:publish将包发布到 npm

来源: package.json16-30 CONTRIBUTING.md78-80

高级用法

TypeScript 支持

Svelte 拥有全面的 TypeScript 定义。这些是通过

生成的类型已提交到仓库中。

来源: CONTRIBUTING.md134-137 packages/svelte/scripts/generate-types.js

检查 Treeshakeability

Svelte 确保其所有包都能被正确地 tree-shakeable。这可以通过

来源: packages/svelte/scripts/check-treeshakeability.js

持续集成

Svelte 使用 GitHub Actions 进行持续集成。主工作流定义在 .github/workflows/ci.yml 中,包括

  1. 在多个平台和 Node.js 版本上运行测试
  2. Linting 和类型检查
  3. 运行基准测试

Pull Request 会自动进行测试,并可以使用 CI 发布的包进行预览。

来源: .github/workflows/ci.yml .github/workflows/pkg.pr.new.yml .github/workflows/pkg.pr.new-comment.yml

获取帮助

如果您对贡献 Svelte 有任何疑问,请随时在 Discord 上的 #contributing 频道提问。

有关代码库不同部分的更详细信息,请查看以下页面

来源: CONTRIBUTING.md169-171 README.md13-14