SvelteKit

SvelteKit 是使用 Svelte ↗ 构建现代 Web 应用的官方框架，Svelte 是日益流行的开源用户界面创建工具。与大多数框架不同，SvelteKit 使用 Svelte（一种将组件代码编译为高效 JavaScript 的编译器），从而能够交付快速、响应式的应用，并在应用状态变化时精准更新 DOM。

在本指南中，你将创建新的 SvelteKit 应用并使用 Cloudflare Pages 部署。 你将使用 SvelteKit ↗，这是用于构建各种规模 Web 应用的官方 Svelte 框架。

使用 create-cloudflare ↗ CLI (C3) 设置新项目。C3 将创建新项目目录，启动 SvelteKit 官方设置工具，并提供即时部署选项。

要使用 create-cloudflare 创建新的 SvelteKit 项目，请运行以下命令：

npm create cloudflare@latest -- my-svelte-app --framework=svelte --platform=pages

yarn create cloudflare my-svelte-app --framework=svelte --platform=pages

pnpm create cloudflare@latest my-svelte-app --framework=svelte --platform=pages

SvelteKit 将提示你进行自定义选择。对于模板选项，选择应用/项目选项之一。其余回答不会影响本指南的其余部分。选择适合项目的选项。

create-cloudflare 随后将安装依赖，包括 Wrangler CLI 和 SvelteKit @sveltejs/adapter-cloudflare 适配器，并询问设置问题。

安装项目依赖后，启动应用：

npm run dev

所有框架指南都假定你已具备 Git ↗ 的基础知识。如果你是 Git 新手，请参阅这份精简 Git 手册 ↗，了解如何在本地设置 Git。

如果你使用 SSH 克隆，则必须在每台用于向 GitHub 推送或拉取的计算机上生成 SSH 密钥 ↗。

更多信息请参阅 GitHub 文档 ↗和 Git 文档 ↗。

访问 repo.new ↗ 创建新的 GitHub 仓库。创建新仓库后，进入新创建的项目目录，在终端中运行以下命令，准备并将本地应用推送到 GitHub：

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

要在 Cloudflare Pages 上使用 SvelteKit，需要向应用添加 Cloudflare 适配器 ↗。

1. 在终端运行 npm i --save-dev @sveltejs/adapter-cloudflare 安装 Cloudflare 适配器。
2. 在 svelte.config.js 中包含适配器：

- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-cloudflare';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    // ... truncated ...
  }
};

export default config;

3. （若使用 TypeScript）包含对环境变量的支持。包含 KV namespace 和其他存储对象的 env 对象通过 platform 属性与 context 和 caches 一起传递给 SvelteKit，这意味着你可以在 hooks 和 endpoints 中访问它。例如：

declare namespace App {
    interface Locals {}

+   interface Platform {
+       env: {
+           COUNTER: DurableObjectNamespace;
+       };
+       context: {
+           waitUntil(promise: Promise<any>): void;
+       };
+       caches: CacheStorage & { default: Cache }
+   }

    interface Session {}

    interface Stuff {}
}

4. 在端点中使用 env 访问添加的 KV 或 Durable Objects（或 generally 任何绑定（binding））：

export async function post(context) {
	const counter = context.platform.env.COUNTER.idFromName("A");
}

如果你使用 create-cloudflare(C3) ↗ 创建新的 Svelte 项目，C3 将安装项目所需的所有依赖，并提示你通过 CLI 部署项目。如果部署，你的站点将上线，并会提供部署 URL。

要将站点部署到 Pages：

1. 在 Cloudflare 仪表板中，前往 Workers & Pages 页面。

   Go to Workers & Pages ↗

2. 选择 Create application（创建应用程序）。

3. 选择 Pages 选项卡。

4. 选择 Import an existing Git repository（导入现有 Git 仓库）。

5. 选择你创建的新 GitHub 仓库，然后选择 Begin setup（开始设置）。

6. 在 Build settings（构建设置） 部分，选择 SvelteKit 作为 Framework preset（框架预设）。你的选择将提供以下信息：

可选：你可以自定义 Project name（项目名称） 字段。它默认为 GitHub 仓库名称，但不必一致。Project name（项目名称） 值将分配为你的 *.pages.dev 子域名。

完成配置后，点击 Save and Deploy（保存并部署） 按钮。

你将看到首次部署流水线正在进行。Pages 安装所有依赖并按指定方式构建项目。

每次推送新提交时，Cloudflare Pages 都会自动重新构建并部署 SvelteKit 项目。

此外，你还可以使用预览部署，对 pull request 重复构建和部署流程。这样可以在部署到生产环境之前，通过真实 URL 预览项目更改。

在 SvelteKit 中，functions 编写为端点。项目根目录 /functions 目录中的 Functions 不会包含在部署中，部署编译为单个 _worker.js 文件。

要获得与 Pages Functions onRequests 等效的功能，需要在 SvelteKit 中编写标准请求处理程序。 例如，以下 TypeScript 文件的行为类似 onRequestGet：

import type { RequestHandler } from "./$types";

export const GET = (({ url }) => {
	return new Response(String(Math.random()));
}) satisfies RequestHandler;

完成本指南后，你已成功将 Svelte 站点部署到 Cloudflare Pages。要开始使用其他框架，请参阅框架指南列表。