开始使用SvelteKit

如何使用SvelteKit来连接一个全栈应用程序，以利用服务器端渲染和Svelte的便利性。

所谓的元框架，如Next.js和Gatsby，在过去几年中已经开始流行。本文向你介绍最近的一个例子，即Svelte的SvelteKit框架。与之前的Next.js一样，SvelteKit为构建反应式Web应用提供了一个一体化的全栈平台。

SvelteKit是Sapper的继任者，Sapper是Svelte的前一代全栈预渲染框架。

什么是SvelteKit？

SvelteKit的理念是将前端和后端结合在一起，获得两个世界的最佳效果。除了使构建过程变得简单外（因为整个堆栈是结合在一起的），SvelteKit还提供了以下开箱即用的好处：

服务器端渲染
代码拆分
客户端路由
简化的数据预取
单一命令的静态网站输出
全栈热部署（开发模式）。

这些好处的代价是更陡峭的学习曲线。你必须接受和吸收该框架用来将应用程序的两个元素联系在一起的惯例。然而，这些约定并不十分繁琐，一旦掌握了这些约定，开发就会以很快的速度进行。

为了开始探索，我们将从默认的SvelteKit应用程序模板开始。(如果你想继续学习，这里有整个示例应用程序。)我们将使用Rollup的模板（Webpack也可以使用）。在一个控制台中，输入

npm init svelte@next svelte-kit-intro

现在移动到新创建的/svelte-kit-intro目录，运行npm install ，安装Node.js模块。

现在你可以用npm run dev ，在开发模式下运行该应用程序。如果你打开浏览器到localhost:3000，你会看到该应用程序正在运行，如图1。

SvelteKit中的路由是文件和文件夹

你的应用程序的每个页面都是一个Svelte组件。每个路由都被映射到你的应用程序中的一个文件。

最重要的顶层目录是/src。你的大部分自定义代码都在这里。注意/src/routes目录。这是你的应用程序将支持的URL被定义的地方。

文件夹对应于路径，文件对应于资源。应用程序的默认条目是/src/routes/index.svelte，它对应于根URL：localhost:3000/。每当一个文件夹路径有index.svelte文件时，该文件将为空路径服务。

在你正在看的启动器应用程序的情况下，导航栏上的每个标签都对应着一条路线。点击 "Todos "标签。看一下源代码。注意，有一个/src/routes/todos/index.svelte文件为这个页面服务。

带下划线的非路线文件

你可以在路由结构中的任何地方放置带有下划线的JavaScript文件（例如，样本应用程序中的/src/routes/todos/_api.js文件）。这些文件可以作为共享的JS模块使用。

添加一个页面

这就是客户端的路由。SvelteKit会在服务器上自动为你预渲染这些页面，这时，客户端的单页应用程序将接管。为了看看它有多简单，我们来添加一个页面。创建一个/src/routes/infoworld.svelte页面，将清单1中的内容放入其中。

清单1.一个新的InfoWorld页面

<main>

现在浏览到localhost:3000/infoworld，你会看到新的页面。

SvelteKit中的布局

另一个重要的约定默认值是__layout.svelte文件（注意双underscore的前缀）。该文件将自动定义一个布局，并应用于每个页面。Svelte包含了槽的概念，__layout.svelte利用这个概念来决定将内部内容放在哪里。清单2显示了布局目前的工作情况（为简洁起见省略了样式）。

清单 2.__layout.svelte

<script>

除了槽之外，布局还使用了segment 和一个Header 组件。segment 是一个内置的功能，它将自动向变量中填充当前的页面。这被Header 组件用来决定突出哪个菜单项。

现在让我们为我们新的InfoWorld页面添加一个导航项。打开 src/lib/header/Header.svelte 文件。在无序列表（该元素）中添加一个新的列表项，如清单3所示。注意新的第四个项目链接到InfoWorld页面。

清单3.添加一个新的菜单项

<ul>

现在你将在浏览器中看到新的InfoWorld菜单项。注意到我们使用了从__layout传入的segment 变量，根据页面名称来突出显示菜单项。

服务器端的SvelteKit

现在让我们来了解一下SvelteKit是如何将客户端与服务器整合在一起的。打开/src/routes/todos/index.svelte文件，将其与你在localhost:3000/todos页面看到的内容进行比较。注意，该页面允许你创建新的todos，然后将其列出。SvelteKit是如何完成todos的列表的？请看清单3所示的/src/routes/todos/index.svelte中的代码。

清单4.打击后端

<script context="module">

SvelteKit支持context="module" 属性。这通知框架，里面的脚本应该在模块创建时被评估，而不是在组件实例化时。这意味着数据的获取将立即发生。

现在考虑一下load 函数。它正在通过从一个相对的URL，/todos.json中获取数据。SvelteKit从哪里找到这个资源？答案是SvelteKit使用了一个与客户端类似的映射约定。在这种情况下，URL将被翻译成文件系统中的src/routes/todos/index.json.js路径。看一下该文件，你会看到下面清单5中显示的代码。

处理请求

清单5一开始就导入了一个文件（_api.）。这并不是SvelteKit特有的，这只是在Node.js中导入了一个JS文件。(index.json.js使用该文件与api.svelte.dev提供的远程服务进行交互，以用于该欢迎应用程序）。

清单5./src/routes/todos/index.json.js

import { api } from './_api';

清单5的其余部分是关于在后端REST请求和前端之间调解响应的JSON。我们导出了一个get 函数，它被映射到我们从/src/todos/index.json.js打出的GET HTTP方法。并导出一个post 函数，用于处理POST的todos。

注意这些终端函数类似于Express，但实际上不是Express。请记住，SvelteKit的设计是为了最终运行在各种平台上，而不仅仅是Node.js，所以它是一个抽象的请求/响应API。

输出到特定的构建环境是通过适配器处理的。

URL路径参数

现在创建几个todos，然后编辑其中一个名称。更新todo的名字是通过提交到src/routes/todos/index.svelte的这个URL来处理的。

"/todos/{todo.uid}.json?_method=patch"

注意{todo.uid}变量令牌被用来为URL路径提供一个ID。

这是由/src/routes/todos/[uid].json.js文件捕获的。

文件名中的方括号表示一个将被填充的URL参数。这个标识符（"uid"）将被提供给其中的代码。

打开[uid].json.js文件，看看其中定义的PATCH方法，你会看到该路径参数是如何通过request.params.uid访问的，如清单6中所示。

清单6还利用了你之前看到的共享的_api.js模块，它被用来包装访问远程API的共享功能。

像Svelte一样简单

在SvelteKit的引擎盖下还有更多的东西，但我们已经涵盖了基础知识。你已经看到了你是如何快速地开始将一个利用服务器端渲染的全栈应用程序连接起来的。你也看到了Svelte是如何让生活变得更轻松的。

最后，你可以用npm run build 创建一个服务器和客户端的生产构建，或者用npm run export 创建一个静态构建。