Svelte 与 SvelteKit 的初尝试
发布于 2024年7月10日
好不容易再次充满干劲，趁着这个机会把 Sliver Complex 的登陆页给重写一下，顺便尝试一下之前就想试一试的 Svelte 与 SvelteKit。
为什么是 Svelte 与 SvelteKit？
我很喜欢 Vue，同时对 React 也有一定的知识储备，按理来说二选一就可以了。但是，当我第一次了解到 Svelte 这个前端框架的时候，它还是成功钓起了我的好奇心。
Svelte 与 React 和 Vue 不同的是，它在构建过程中进行了优化，最终构建产物要比两者更小、更快。Evan You 曾经做过一个 Svelte 和 Vue 的对比测试：在组件较少的情况下，因为 Svelte 不具有 Runtime（运行时），所以其构建产物的体积要比 Vue 的小很多；而如果组件数量来到 19 个、或是 SSR 模式下来到 13 个组件，Svelte 和 Vue 可谓不相上下。
当然，今天要写的 Sliver Complex 登陆页并不会有这么多的组件。于是，轻量的项目就用轻量的框架写，我决定用 Svelte 来重写，顺便试一下它的元框架 SvelteKit。
实践之路
bun create svelte@latest
由于 pnpm 装一次依赖、在依赖安装期间我的硬盘负载率特别高，于是我使用了 bun 作为 JavaScript 打包器 / Node.js 包管理器。所以，我直接用 bun 初始化了一个 SvelteKit 项目，而事实证明 bun 和 SvelteKit 的兼容性还是可以的。
配置 UnoCSS
安装
SvelteKit 默认使用 Vite 作为打包器，并且它贴心的给你保留了 vite.config.ts 配置文件。因此，我们可以直接使用 UnoCSS 的 Vite 集成，那就先来安装一下吧：
bun add -D unocss
接着来动一下 vite.config.ts：
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import UnoCSS from "unocss/vite";
export default defineConfig({
plugins: [UnoCSS(), sveltekit()],
});
UnoCSS 的文档 贴心地告诉你 要将 UnoCSS 插件放在
@sveltejs/vite-plugin-svelte前面，SvelteKit 同理。
如果你想要让 UnoCSS 的规则集也用上 SvelteKit 的 class:foo 或 class:foo={bar} 用法的话，那就多加一个 extractor 吧：
import { sveltekit } from "@sveltejs/kit/vite";
import UnoCSS from "unocss/vite";
import extractorSvelte from "@unocss/extractor-svelte";
/** @type {import('vite').UserConfig} */
const config = {
plugins: [
UnoCSS({
extractors: [extractorSvelte()],
}),
sveltekit(),
],
};
引入 uno.css
UnoCSS 并没有告诉我们要在 Svelte 或 SvelteKit 的哪个地方引入 uno.css （或者说人家根本没这个义务）。而 Svelte 每一个组件的 <style></style> 样式块中的样式都不会溢出这个组件，导入到特定一个组件是不可能的。
不过，我们可以创建一个 Layout（布局）、并在那里引入 uno.css，这样可以绕开上面提到的特性。让我们在 src/routes 下创建一个 +layout.svelte 组件：
<script lang="ts">
import "uno.css"
</script>
<slot />
做完之后就可以开始在 SvelteKit 里尽情使用 UnoCSS 啦。
深浅色模式：svelte-theme-select
在用 Nuxt 重构我的博客时，我使用了 @nuxt/color-mode 来接管网站的深浅色模式。但现在是在 SvelteKit，自己写一套深浅色切换的代码是绝对不可能的，而且很大可能导致浏览器加载完毕才切换主题、导致用户看到一瞬间的闪烁。不过，SvelteKit 的插件也不少，这里我们就用 svelte-theme-select 来接管深浅色模式即可。
bun add svelte-theme-select
要引入 svelte-theme-select 的地方同样是 Layout 组件。由于我只需要其跟随用户偏好（一般是系统设置）切换深浅色主题，所以我只需要简单插入几行代码即可。
<script lang="ts">
import "uno.css";
import { createThemeSwitcher, Theme } from 'svelte-theme-select'; // 导入需要的内容
createThemeSwitcher(); // 执行函数
</script>
<slot />
<Theme /> // 插入相关的主题切换 JavaScript 代码
同时，因为我使用了 UnoCSS 的默认预设，其包含了 TailwindCSS 的大部分规则集，所以可以按照 TailwindCSS 编写深色主题时的方法来即可：
<div class="bg-white dark:bg-black">Background</div>
数据获取与遍历：显示 GitHub 组织下所有人可见的仓库
在设计这个登陆页的时候，我突发奇想：要是能显示 GitHub 组织下所有人可见的仓库，那该多好！
事实是可以做到，通过 GitHub API 获取、在 SvelteKit 上 map 一下需要的信息即可。这里先贴上代码：
<script lang="ts">
import { onMount } from 'svelte';
interface Repo {
name: string;
html_url: string;
description: string;
}
let repos: Repo[] = [];
let isLoading = true;
onMount(async () => {
const response = await fetch('https://api.github.com/users/s-complex/repos');
const data: Repo[] = await response.json();
repos = data.map((repo) => ({
name: repo.name,
html_url: repo.html_url,
description: repo.description
}));
isLoading = false;
});
</script>
<hgroup>
<h1>Project</h1>
<p>List of projects that are visible to everyone in this lab.</p>
</hgroup>
{#if isLoading}
<p>Loading...</p>
{:else}
<div class=":uno: grid grid-cols-1 sm:grid-cols-2 gap-4">
{#each repos as repo (repo.name)}
<a href={repo.html_url}>
<div class=":uno: px-4 py-2 shadow-md hover:shadow-lg rounded">
<h2>{repo.name}</h2>
<p>{repo.description}</p>
</div>
</a>
{/each}
</div>
{/if}
为了让访客能够知道数据获取的状态，我设定了一个 isLoading 值、默认是 true，它将在数据获取之后改为 false。在判断和数据遍历这方面和 Vue 将 if 判断和 for 遍历直接写在 HTML 代码或 <template></template> 模板块上不同，Svelte 是以 {#if} 和 {#each} 包裹住需要的代码来运行。
Svelte Head
虽然 src 下有一个 app.html，但你打开之后会发现 <head></head> 这里不太寻常：
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
这是因为 Svelte 支持用 <svelte:head></svelte:head> 在各个组件定义头信息。我是直接简单粗暴的定义了一下：
<svelte:head>
<title>Sliver Complex</title>
<meta name="description" content="The landing site of Sliver Complex.">
<link rel="icon" href="https://library.gxres.net/images/icons/favicon.webp">
</svelte:head>
这个登陆页暂时不需要动态标题，所以就不在各个页组件定义了。
预渲染（SSG）
因为各个托管平台有着不同的部署方式，所以 SvelteKit 一一做了对应的「适配器（Adapter）」。因为我只喜欢预渲染（SSG），而 SvelteKit 自带的 Auto Adapter 我不知道能不能 SSG，干脆就自己装一个了，反正也不麻烦。
bun add -D @sveltejs/adapter-static
接下来，我们要在 svelte.config.js 将原本的 Adapter 换成 SSG 的：
import adapter from "@sveltejs/adapter-static"; // 换掉这一行就好了
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter(),
},
};
export default config;
最后，在 src/routes 下添加一个 +layout.ts，并在里面写一行：
export const prerender = true;
如果你需要 Fallback（比如 SPA），你可以改为
false。
小结
最终的成品确实在我的期待之中。重点是：我又多学了一门前端框架（x
如果你需要一个轻量的框架、给一个轻量的项目使用，快来用 Svelte 吧非常好用.jpg
分类于 技术 · 标签： # 前端 # Svelte # SvelteKit
文章作者：Restent Ou
文章链接：https://blog.gxres.net/posts/first-try-svelte-and-sveltekit
本文采用 CC BY-NC-SA 4.0 许可协议，请根据许可协议内容规范转载。