对SvelteKit的初步了解

SvelteKit是Svelte的一个全栈、服务器端、预渲染应用框架，可以将生产构建输出到不同的环境。

SvelteKit是Sapper的继任者，Sapper是Svelte的全栈、服务器端预渲染应用框架，类似于React的Next.js。

SvelteKit与Sapper有许多相似之处，但增加了一些新的、雄心勃勃的功能。特别是，SvelteKit允许针对不同的生产环境，包括无服务器环境。SvelteKit还采用了Vite作为其开发时间工具，它利用ES模块在开发过程中进行快速、精细的HMR（热模块替换）。

继续阅读，了解SvelteKit的预览，它即将发布1.0版本。

SvelteKit概述

SvelteKit的基本理念是将应用程序的整个堆栈简化为一个单一的、标准化的、基于文件的布局。然后，这个布局被用来为多个生产环境提供一致的开发体验。

让我们开始一个新的SvelteKit项目来具体了解这意味着什么。

在命令行中，输入清单1中的命令来创建一个新项目。

清单1.开始一个新的SvelteKit项目

npm init svelte@next test

你会看到，当你运行init 命令时，一个交互式对话框让你在演示应用程序和骨架应用程序之间做出选择。让我们使用演示应用程序进行参观。接受其他的默认值。

当你cd ，进入/test 目录并运行npm run dev ，开发服务器将启动，你可以在localhost:3000 访问演示应用程序。你会看到类似图1的东西。

让该应用继续运行。在另一个窗口中，看一下已经创建的内容。你会看到一个典型的基于Node/npm的应用程序布局在根目录中，包括package.json 和/node_modules 。

除了这些，还有一些SvelteKit的具体内容：sveltekit.config.js 以及/src 和/static 目录。

sveltekit.config.js 文件开始时非常短，但它是你可以配置一些非常强大的功能的地方。/static 目录是放置图片等静态资产的地方。应用程序的核心是在/src 。

SvelteKit /src目录

请看一下/src 。在那里你会发现几个标准文件，包括hooks.js （用于定义在每个请求中执行的交叉代码）和app.html （用于引导前端）。你现在不需要担心这些问题。

SvelteKit /src/routes目录

你的新应用程序的核心部分包含在/src/routes 目录中。打开/src/routes ，你会看到几个文件和一个目录。让我们依次来看一下：

• about.svelte:这是一个前端路由，对应于当前托管在localhost:3000/about 的页面。这展示了基于文件系统的前端路由的基本概念。
• index.svelte:按照惯例，这个前端路由对应于根URL，localhost:3000/ 。
• __layout.svelte:这是一个特殊的文件，定义了应用于所有页面的共享布局。如果你打开它，你会看到Slot 这个组件。这就是页面内容将被插入的地方。
• /todos:这个目录包含驱动localhost:3000/todos 页面的内容。在/todos ，你会发现以下文件。
  • _api.js:在SvelteKit中，以下划线字符为前缀的文件不是路由。相反，它们被你，即开发者，作为内部模块使用。你可以看到这个文件导出了一个JS模块，在其他地方使用。
  • index.svelte:你已经看到，这适用于一个空的URL路径，它也适用于嵌套的目录。因此，这个文件对应的是localhost:3000/todos/ 页面。
  • index.json.js:这是一个后端路由。它遵循与前端路由相同的惯例，因此提供了localhost:3000/todos.json 的内容。 如果你创建了一些todos，你会在这里看到它们的JSON输出。该JSON被前端路由所使用。简而言之，它提供了一个RESTful API。
  • [uid].json.js:这种看似奇怪的语法允许使用URL路径参数。方括号内的令牌被提供给这个路由中的代码使用。在这种情况下，代码使用uid 变量来引用正在处理的todo UID。

一些一般性的评论。首先，每个前端路由都是由那些带有.svelte 扩展的路由定义的，而每个页面都是一个构建该页面的Svelte组件。第二，每个后端路由都是一个扩展名为.js 的文件。

前端路由是标准的Svelte组件，具有这些组件带来的所有功能，包括组成复杂的基于组件的嵌套布局的能力。后端路由的API与Express端点非常相似，但它们并不完全相同。请记住，SvelteKit允许你将你的应用程序导出到一些生产运行机制。Node.js只是其中之一。

SvelteKit适配器

因为SvelteKit可以针对多种环境，所以后端文件是一种理想化的API，可以随时转变为主机环境中的实际具体实现。

这是通过适配器完成的，其中有几个官方的适配器和一些社区的适配器。没有什么（除了时间和意志）可以阻止你建立你自己的适配器。

你可以看到，有几个适配器针对无服务器环境，如Cloudflare Workers和Vercel，还有两个 "标准 "适配器用于Node.js和静态网站。请注意，静态适配器的意思就是这样。它输出一个非动态的网站。

服务器端渲染和SPA

以上总结了SvelteKit应用中最基本的概念，但它只是触及了SvelteKit的能力的表面。特别是，SvelteKit是一个SSR（服务器端渲染）框架。这意味着第一个客户端页面组件将（默认情况下）在服务器上进行渲染，并完全交付给浏览器。此后，页面将作为客户端渲染的组件被加载到SPA风格（单页应用程序）。

这推动了性能和SEO的优势（类似于Next.js），并意味着你的页面必须写得既能在服务器上运行，又能在客户端运行。

在实践中，这意味着Svelte组件必须不依赖于客户端的功能（如window 对象）。不过，也有一些方法可以解决这个问题，包括检测页面何时在浏览器上被渲染的能力。

此外，这意味着页面可以从服务器和客户端访问远程API（通过SvelteKitfetch 函数，它是标准浏览器获取API的直接替代品）。

SvelteKit load()函数

最后，SvelteKit页面的同构性意味着它们拥有预先运行数据存储访问的超级能力。这在Next.js中被看作是getStaticProps 和getServerSideProps 。在SvelteKit中，这种访问是通过load 函数处理的，它可以被页面导出。(SvelteKit的load 与Sapper的preload 类似）。

SvelteKit中由页面导出的load 函数是处理SSR中数据加载的一种独特方法。你可以把它看作是一个特殊的服务器端代码块，在页面被渲染之前向其提供数据。考虑一下清单2中由/src/routes/todos/index.svelte 输出的加载函数。

清单2.Todo加载函数

<script context="module">

注意这个函数是通过参数提供的，有一个特殊的fetch 函数。这个fetch 函数的API与你在浏览器中熟悉的标准函数相同，但允许SvelteKit在服务器上也能运行它。

还请注意，load 函数会返回一个值。这些值会在页面渲染时自动暴露给它。在这种情况下，这要么是一组todos，要么是一个错误信息，如果出了问题的话。

一个下一代的Next.js

尽管SvelteKit欠下了Next.js的灵感，但它绝对是一个下一代的框架，它的目标更加远大，尤其是将生产构建输出到不同环境的能力。

SvelteKit为你提供了Svelte本身的所有优点，以及大量用于构建动态、数据驱动的应用程序的端到端功能。