Sapper Blog App 项目启动与配置教程

Sapper Blog App 项目启动与配置教程

1. 项目目录结构及介绍

Sapper Blog App 是一个使用 Svelte 和 TypeScript 的单页应用程序（SPA），其目录结构如下：

• app/: 主应用程序目录，包含了所有的页面组件、路由和布局。
• contents/: 博客文章数据目录，用于存放文章的 Markdown 文件。
• packages/: 存放与项目相关的各种工具和插件。
  • content-management/: 用于同步 Contentful 数据和本地文章数据的脚本。
  • rehype-alert/: 一个 rehype 插件，用于转换 Markdown 中的警告语法。
  • remark-link-card/: 一个 remark 插件，将 Markdown 链接转换为卡片样式。
  • remark-contentful-image/: 一个 remark 插件，用于优化 contentful 中的图片。
  • eslint-config-custom/: 项目通用的 ESLint 配置文件。
  • tsconfig.json/: 项目通用的 TypeScript 配置文件。
• .github/: 存储 GitHub Actions 工作流文件。
• .vscode/: Visual Studio Code 的项目设置。
• env.example: 环境变量示例文件。
• gitignore: Git 忽略文件列表。
• prettierrc: Prettier 的配置文件。
• CLAUDE.md: 法律声明文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。
• lighthouserc.cjs: Lighthouse 配置文件。
• package-lock.json: npm 包锁定文件。
• package.json: npm 包配置文件。
• testedPaths.cjs: 测试路径配置文件。
• turbo.json: Turborepo 配置文件。

2. 项目的启动文件介绍

项目的启动主要是通过 package.json 中的脚本来完成的。以下是一些主要的启动脚本：

• npm run dev: 启动开发服务器，通常用于本地开发。
• npm run build: 构建项目，生成生产环境的静态文件。
• npm run lint: 运行 ESLint，检查代码风格。
• npm run typecheck: 运行 TypeScript 类型检查。
• npm run test: 运行单元测试。
• npm run test:e2e -w=app: 运行端到端测试。

要启动项目，首先需要克隆仓库，然后安装依赖：

$ git clone git@github.com:azukiazusa1/sapper-blog-app.git
$ cd sapper-blog-app
$ npm i

之后，可以运行开发服务器：

$ npm run dev

3. 项目的配置文件介绍

项目中的配置文件主要包括以下几种：

• .env.example: 环境变量示例文件，用于展示项目中可能需要的环境变量。
• prettierrc: Prettier 的配置文件，用于统一代码格式。
• tsconfig.json: TypeScript 的配置文件，定义了项目的 TypeScript 编译选项。
• turbo.json: Turborepo 的配置文件，用于配置单仓库多包项目的构建和测试。

确保在开发前正确配置这些文件，以保证项目的正确编译和运行。