SvelteKit 最新中文文档教程（7）—— 构建和部署

前言

Svelte，一个语法简洁、入门容易，面向未来的前端框架。
从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目。
为了帮助大家学习 Svelte，我同时搭建了 Svelte 最新的中文文档站点。
如果需要进阶学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。
构建您的应用

构建 SvelteKit 应用程序分为两个阶段，这两个阶段都发生在您运行 vite build（通常通过 npm run build）时。
首先，Vite 会为您的服务端代码、浏览器代码和 service worker（如果有的话）创建优化的生产构建。如果合适，预渲染会在此阶段执行。
其次，适配器（adapter） 会对这个生产构建进行调整，使其适合目标环境 — 更多内容将在接下来的页面中介绍。
构建过程中

SvelteKit 会在构建过程中加载您的 +page/layout(.server).js 文件（以及它们导入的所有文件）进行分析。
任何在此阶段不应该被执行的代码必须通过检查 $app/environment 的 building 是否为 false：

1. +++import { building } from '$app/environment';+++
2. import { setupMyDatabase } from '$lib/server/database';
4. +++if (!building) {+++
5.         setupMyDatabase();
6. +++}+++
8. export function load() {
9.         // ...
10. }

复制代码

预览您的应用

构建完成后，您可以通过 vite preview（通过 npm run preview）在本地查看您的生产构建。请注意，这将在 Node 中运行应用程序，因此无法完美复现您部署的应用程序 — 适配器特定的调整（如 platform 对象）不适用于预览。
适配器

在部署 SvelteKit 应用之前，您需要为您的部署目标进行适配。适配器是一些小型插件，它们接收构建好的应用作为输入，并生成用于部署的输出。
官方为多个平台提供了适配器 — 这些在以下页面中有详细文档：

• @sveltejs/adapter-cloudflare 用于 Cloudflare Pages
  
• @sveltejs/adapter-cloudflare-workers 用于 Cloudflare Workers
  
• @sveltejs/adapter-netlify 用于 Netlify
  
• @sveltejs/adapter-node 用于 Node 服务器
  
• @sveltejs/adapter-static 用于静态站点生成 (SSG)
  
• @sveltejs/adapter-vercel 用于 Vercel
  

还有社区提供的适配器用于其他平台。
使用适配器

您的适配器在 svelte.config.js 中指定：

1. /// file: svelte.config.js
2. // @filename: ambient.d.ts
3. declare module 'svelte-adapter-foo' {
4.         const adapter: (opts: any) => import('@sveltejs/kit').Adapter;
5.         export default adapter;
6. }
8. // @filename: index.js
9. // ---cut---
10. import adapter from 'svelte-adapter-foo';
12. /** @type {import('@sveltejs/kit').Config} */
13. const config = {
14.         kit: {
15.                 adapter: adapter({
16.                         // 适配器选项在这里
17.                 })
18.         }
19. };
21. export default config;

复制代码

平台特定上下文

某些适配器可能可以访问关于请求的额外信息。例如，Cloudflare Workers 可以访问包含 KV 命名空间等的 env 对象。这可以作为 platform 属性传递给在hooks和服务端路由中使用的 RequestEvent — 查看每个适配器的文档以了解更多信息。
零配置部署

当您使用 npx sv create 创建一个新的 SvelteKit 项目时，它默认会安装 adapter-auto。这个适配器会在您部署时自动安装并使用支持环境的适配器：

• @sveltejs/adapter-cloudflare 用于 Cloudflare Pages
  
• @sveltejs/adapter-netlify 用于 Netlify
  
• @sveltejs/adapter-vercel 用于 Vercel
  
• svelte-adapter-azure-swa 用于 Azure Static Web Apps
  
• svelte-kit-sst 用于 通过 SST 部署到 AWS
  
• @sveltejs/adapter-node 用于 Google Cloud Run
  

建议您一旦确定了目标环境，就将相应的适配器安装到您的 devDependencies 中，因为这将把适配器添加到您的 lockfile 中，并略微改善 CI 上的安装时间。
特定环境的配置

要添加配置选项，比如在 adapter-vercel 和 adapter-netlify 中的 { edge: true }，您必须安装底层适配器 — adapter-auto 不接受任何选项。
添加社区适配器

您可以通过编辑 adapters.js 并提交 PR 来添加对其他适配器的零配置支持。
Svelte 中文文档

点击查看中文文档 - SvelteKit 构建和部署。
系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog
欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！