菜单

项目结构

相关源文件

本文档概述了 Svelte 仓库的组织、目录结构以及其核心组件之间的关系。它解释了 Svelte 代码库如何作为单一代码库进行组织,并详细介绍了关键的包、站点和实用工具代码。

单仓概览

Svelte 使用 pnpm 作为其包管理器,并以单一代码库的形式进行组织。这种方法使开发团队能够在一个代码库中管理多个包和站点,简化了版本控制,并实现了更高效的依赖管理。

存储库结构图

来源: package.json1-49 packages/svelte/package.json1-165

根目录

根目录包含管理整个单一代码库的配置文件和脚本

  • package.json: 定义了单一代码库的详细信息和共享脚本
  • pnpm-lock.yaml: 锁文件,确保依赖版本的一致性
  • .gitignore: 指定要从版本控制中排除的文件
  • 用于构建、测试和管理发布的根级别脚本

关键脚本

脚本目的
build构建单一代码库中的所有包
build:sites构建所有站点
check在整个代码库中执行类型检查
test使用 Vitest 运行测试
changeset:version通过 changesets 管理版本更新
changeset:publish发布新版本
bench运行基准测试以进行性能评估

来源: package.json16-29

Packages 目录

packages/ 目录包含核心 Svelte 包以及其他相关包。主要的包是 svelte,其中包含编译器和运行时。

Svelte 包结构图

来源: packages/svelte/package.json11-18 packages/svelte/package.json22-104

包导出

Svelte 包定义了多个导出路径,允许使用者导入特定功能

导出路径描述
svelte主包入口点,包含特定环境的导出
svelte/animate动画工具
svelte/compilerSvelte 编译器 API
svelte/easing动画缓动函数
svelte/internal内部实用工具(不建议直接使用)
svelte/motion运动原语,如弹簧和补间动画
svelte/reactivity响应式原语和实用工具
svelte/server服务器特定实用工具
svelte/storeSvelte store 实现
svelte/transition过渡效果
svelte/events事件处理实用工具

来源: packages/svelte/package.json22-104

包导出配置为提供浏览器和服务器环境的不同入口点,确保在每个环境中都使用适当的代码。

Sites 目录

sites/ 目录包含与 Svelte 相关的 Web 应用程序

  • svelte-5-preview: Svelte 5 功能和文档的预览站点

这些站点作为 Svelte 框架的示例、文档和测试平台。

来源: packages/svelte/package.json18

构建系统

Svelte 使用 Rollup 进行打包,并使用 TypeScript 进行类型检查

构建流程图

来源: packages/svelte/package.json122-130

构建系统包括:

  • Rollup 配置用于打包源代码
  • TypeScript 用于类型检查和生成类型定义
  • 专用脚本用于处理错误消息和生成版本信息

测试基础设施

该仓库包含一个全面的测试设置

  • Vitest 用于单元和集成测试
  • Playwright 用于基于浏览器的测试
  • 通过 V8 覆盖引擎进行覆盖率报告

来源: package.json31-47

版本管理

Svelte 使用 changesets 进行版本管理。当前版本信息存储在

  • packages/svelte/src/version.js: 定义当前版本
  • CHANGELOG.md: 记录版本间的更改

来源: packages/svelte/src/version.js1-9 packages/svelte/CHANGELOG.md1-1011

目录结构摘要

这是仓库主要目录的简化视图

svelte-monorepo/
├── benchmarking/       # Performance benchmarking tools
├── packages/           # Core packages
│   └── svelte/         # Main Svelte package
│       ├── compiler/   # Compiler output for Node.js usage
│       ├── src/        # Source code
│       └── types/      # TypeScript definitions
├── playgrounds/        # Development playgrounds and examples
│   └── sandbox/        # Sandbox environment for testing
├── sites/              # Websites related to Svelte
│   └── svelte-5-preview/ # Svelte 5 preview site
└── ... configuration files

这种结构允许 Svelte 框架进行高效的开发、测试和文档编写,使贡献者更容易理解和修改代码库。

来源: package.json1-49 packages/svelte/package.json1-165 .gitignore1-27