Svelte
Svelte是一个日益流行的开源框架，用于构建用户界面和网络应用程序。与大多数框架不同，Svelte 主要是一个编译器，可将组件代码转换为高效的 JavaScript，并在应用程序状态发生变化时，以外科手术的方式更新 DOM。
在本指南中，你将创建一个新的 Svelte 应用程序，并使用 Cloudflare Pages 进行部署。
你将使用
SvelteKit，这是用于构建各种规模网络应用程序的 Svelte 官方框架。
设置新项目
使用
create-cloudflare CLI (C3) 建立新项目。C3 将创建一个新的项目目录，启动 Svelte 的官方设置工具，并提供即时部署选项。
要使用 create-cloudflare 创建新的 Svelte 项目，请运行以下命令：
SvelteKit 将提示你进行自定义选择。对于模板选项，请选择应用程序/项目选项之一。其余答案不会影响本指南的其余部分。选择适合你项目的选项。
然后，create-cloudflare会安装依赖项，包括Wrangler CLI和@sveltejs/adapter-cloudflare适配器，并向你提出设置问题。
安装完项目依赖项后，启动应用程序：
在你继续之前
所有框架指南都假定你已经对 Git 有了基本了解。如果你是 Git 的新手，请参考这本 Git 手册摘要，了解如何在本地机器上设置 Git。
如果使用 SSH 克隆，则必须在每台用于从 GitHub 推送或拉取的计算机上 生成 SSH 密钥。
创建 GitHub 仓库
访问 repo.new，创建一个新的 GitHub 仓库。创建新仓库后，进入新创建的项目目录，准备并在终端运行以下命令将本地应用程序推送到 GitHub：
SvelteKit Cloudflare 配置
要在 Cloudflare 页面中使用 SvelteKit，你需要在应用程序中添加 Cloudflare 适配器。
- 在终端运行
npm i --save-dev @sveltejs/adapter-cloudflare安装 Cloudflare 适配器。 - 在
svelte.config.js中加入适配器：
- (使用 TypeScript 时需要)包含对环境变量的支持。包含 KV 命名空间和其他存储对象的
env对象与上下文和缓存一起通过平台属性传递给 SvelteKit，这意味着你可以在钩子和端点中访问它。例如
- 使用
env访问端点中添加的 KV 或 Durable 对象(或通常任何 绑定)：
使用 Cloudflare 页面部署
通过 create-cloudflare CLI (C3) 进行部署
如果使用
create-cloudflare(C3)创建新的 Svelte 项目，C3 将安装项目所需的所有依赖项，并提示你通过 CLI 部署项目。如果你进行了部署，你的网站就会上线，并向你提供一个部署 URL。
通过 Cloudflare 控制面板部署
- 登录 Cloudflare 仪表板 并选择你的账户。
- 在账户主页，选择 工作者和页面> 创建应用程序> 页面> 连接到 Git。
如果你尚未授权访问你的 GitHub 账户，系统将要求你进行授权。Cloudflare 需要此授权才能从你的 GitHub 账户部署项目。你可以缩小 Cloudflare 对特定存储库的访问范围。但是，当你想在 Cloudflare 页面添加更多的软件源时，你必须手动更新此列表 在你的 GitHub 设置中。
选择你创建的新 GitHub 仓库，并在设置构建和部署中提供以下信息：
| Configuration option | Value |
|---|---|
| Production branch | main |
| Build command | npm run build |
| Build directory | .svelte-kit/cloudflare |
你可以选择自定义项目名称字段。它默认为 GitHub 仓库的名称，但不必与之匹配。 Project name 值将被指定为*.pages.dev子域。
完成配置后，单击保存和部署按钮。
你将看到第一个部署管道正在进行中。页面会安装所有依赖项，并按指定方式构建项目。
Cloudflare Pages 会自动重建你的项目，并在每次推送新提交时进行部署。
此外，你还可以访问 预览部署，它可以重复拉取请求的构建和部署过程。有了它们，你就可以在将项目中的更改部署到生产环境之前，用一个真实的 URL 进行预览。
Functions setup
在 SvelteKit 中，函数被写成端点。项目根目录 /functions中包含的函数将不会包含在部署中，部署会编译成一个 _worker.js文件。
要获得与 Pages Functions onRequests 相同的功能，你需要在 SvelteKit 中编写标准请求处理程序。例如，以下 TypeScript 文件的行为类似于 onRequestGet：
了解更多
完成本指南后，你已成功将 Svelte 网站部署到 Cloudflare Pages。要开始使用其他框架，请参阅框架指南列表