SvelteKit 最新中文文档教程（7）—— 构建和部署
<h2 id="前言">前言</h2><p>Svelte，一个语法简洁、入门容易，面向未来的前端框架。</p>
<p>从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，<strong>从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1</strong>：</p>
<p><img src="https://yayujs-blog.oss-cn-beijing.aliyuncs.com/405488775-48df16b1-939c-489b-8d52-6071869893f0.png"></p>
<p>Svelte 以其独特的编译时优化机制著称，具有<strong>轻量级</strong>、<strong>高性能</strong>、<strong>易上手</strong>等特性，<strong>非常适合构建轻量级 Web 项目</strong>。</p>
<p>为了帮助大家学习 Svelte，我同时搭建了 Svelte 最新的中文文档站点。</p>
<p>如果需要进阶学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！</p>
<p>欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。</p>
<h2 id="构建您的应用">构建您的应用</h2>
<p>构建 SvelteKit 应用程序分为两个阶段，这两个阶段都发生在您运行 <code>vite build</code>（通常通过 <code>npm run build</code>）时。</p>
<p>首先，Vite 会为您的服务端代码、浏览器代码和 service worker（如果有的话）创建优化的生产构建。如果合适，预渲染会在此阶段执行。</p>
<p>其次，<em>适配器（adapter）</em> 会对这个生产构建进行调整，使其适合目标环境 — 更多内容将在接下来的页面中介绍。</p>
<h3 id="构建过程中">构建过程中</h3>
<p>SvelteKit 会在构建过程中加载您的 <code>+page/layout(.server).js</code> 文件（以及它们导入的所有文件）进行分析。</p>
<p>任何在此阶段不应该被执行的代码必须通过检查 <code>$app/environment</code> 的 <code>building</code> 是否为 <code>false</code>：</p>
<pre><code class="language-js">+++import { building } from '$app/environment';+++
import { setupMyDatabase } from '$lib/server/database';
+++if (!building) {+++
setupMyDatabase();
+++}+++
export function load() {
// ...
}
</code></pre>
<h3 id="预览您的应用">预览您的应用</h3>
<p>构建完成后，您可以通过 <code>vite preview</code>（通过 <code>npm run preview</code>）在本地查看您的生产构建。请注意，这将在 Node 中运行应用程序，因此无法完美复现您部署的应用程序 — 适配器特定的调整（如 <code>platform</code> 对象）不适用于预览。</p>
<h2 id="适配器">适配器</h2>
<p>在部署 SvelteKit 应用之前，您需要为您的部署目标进行<em>适配</em>。适配器是一些小型插件，它们接收构建好的应用作为输入，并生成用于部署的输出。</p>
<p>官方为多个平台提供了适配器 — 这些在以下页面中有详细文档：</p>
<ul>
<li><code>@sveltejs/adapter-cloudflare</code> 用于 Cloudflare Pages</li>
<li><code>@sveltejs/adapter-cloudflare-workers</code> 用于 Cloudflare Workers</li>
<li><code>@sveltejs/adapter-netlify</code> 用于 Netlify</li>
<li><code>@sveltejs/adapter-node</code> 用于 Node 服务器</li>
<li><code>@sveltejs/adapter-static</code> 用于静态站点生成 (SSG)</li>
<li><code>@sveltejs/adapter-vercel</code> 用于 Vercel</li>
</ul>
<p>还有社区提供的适配器用于其他平台。</p>
<h3 id="使用适配器">使用适配器</h3>
<p>您的适配器在 <code>svelte.config.js</code> 中指定：</p>
<pre><code class="language-js">/// file: svelte.config.js
// @filename: ambient.d.ts
declare module 'svelte-adapter-foo' {
const adapter: (opts: any) => import('@sveltejs/kit').Adapter;
export default adapter;
}
// @filename: index.js
// ---cut---
import adapter from 'svelte-adapter-foo';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter({
// 适配器选项在这里
})
}
};
export default config;
</code></pre>
<h3 id="平台特定上下文">平台特定上下文</h3>
<p>某些适配器可能可以访问关于请求的额外信息。例如，Cloudflare Workers 可以访问包含 KV 命名空间等的 <code>env</code> 对象。这可以作为 <code>platform</code> 属性传递给在hooks和服务端路由中使用的 <code>RequestEvent</code> — 查看每个适配器的文档以了解更多信息。</p>
<h2 id="零配置部署">零配置部署</h2>
<p>当您使用 <code>npx sv create</code> 创建一个新的 SvelteKit 项目时，它默认会安装 <code>adapter-auto</code>。这个适配器会在您部署时自动安装并使用支持环境的适配器：</p>
<ul>
<li><code>@sveltejs/adapter-cloudflare</code> 用于 Cloudflare Pages</li>
<li><code>@sveltejs/adapter-netlify</code> 用于 Netlify</li>
<li><code>@sveltejs/adapter-vercel</code> 用于 Vercel</li>
<li><code>svelte-adapter-azure-swa</code> 用于 Azure Static Web Apps</li>
<li><code>svelte-kit-sst</code> 用于 通过 SST 部署到 AWS</li>
<li><code>@sveltejs/adapter-node</code> 用于 Google Cloud Run</li>
</ul>
<p>建议您一旦确定了目标环境，就将相应的适配器安装到您的 <code>devDependencies</code> 中，因为这将把适配器添加到您的 lockfile 中，并略微改善 CI 上的安装时间。</p>
<h3 id="特定环境的配置">特定环境的配置</h3>
<p>要添加配置选项，比如在 <code>adapter-vercel</code> 和 <code>adapter-netlify</code> 中的 <code>{ edge: true }</code>，您必须安装底层适配器 — <code>adapter-auto</code> 不接受任何选项。</p>
<h3 id="添加社区适配器">添加社区适配器</h3>
<p>您可以通过编辑 adapters.js 并提交 PR 来添加对其他适配器的零配置支持。</p>
<h2 id="svelte-中文文档">Svelte 中文文档</h2>
<p>点击查看中文文档 - SvelteKit 构建和部署。</p>
<p>系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！</p>
<p>此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog</p>
<p>欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。</p><br><br>
来源：https://www.cnblogs.com/yayujs/p/18783946 感谢楼主的分享！
这篇关于 SvelteKit 构建和部署的教程写得非常详细，从构建过程到适配器的使用，再到零配置部署，覆盖得很全面。之前就关注过楼主的 Svelte 系列文章，质量一直很高，这次的部署篇也很及时，正好解决了我最近在部署项目时遇到的一些困惑。
特别点赞对适配器的介绍，之前一直对 adapter-auto 和具体适配器的区别不太清楚，看完总算是搞明白了。社区适配器那个部分也很实用，以后如果需要部署到其他平台就知道怎么操作了。
期待楼主的更多内容！顺便问一句，小册《Svelte 开发指南》有没有优惠活动？想入手系统学习一下 😄
頁:
[1]