从 Sapper 迁移

SvelteKit 是 Sapper 的后继产品，并共享其设计中的许多元素。

如果你有一个现有的 Sapper 应用程序，并计划将其迁移到 SvelteKit，那么你需要进行一些更改。在迁移时，你可能会发现查看 一些示例 有帮助。

package.json永久链接

type: "module"永久链接

将 "type": "module" 添加到你的 package.json 中。如果你使用的是 Sapper 0.29.3 或更高版本，则可以将此步骤与其余步骤分开，作为增量迁移的一部分。

dependencies永久链接

移除 polka 或 express（如果你正在使用其中一个），以及任何中间件，例如 sirv 或 compression。

devDependencies永久链接

从你的 devDependencies 中移除 sapper，并用 @sveltejs/kit 和你计划使用的任何 适配器 替换它（请参阅 下一节）。

scripts永久链接

任何引用 sapper 的脚本都应更新

• sapper build 应该使用 Node 适配器 变成 vite build
• sapper export 应该使用静态 适配器 变成 vite build
• sapper dev 应该变成 vite dev
• node __sapper__/build 应变为 node build

项目文件永久链接

你的应用程序的大部分内容位于 src/routes 中，可以保留在原处，但需要移动或更新几个项目文件。

配置永久链接

你的 webpack.config.js 或 rollup.config.js 应替换为 svelte.config.js，如 此处 所述。Svelte 预处理器选项应移至 config.preprocess。

你需要添加一个 适配器。sapper build 大致相当于 adapter-node，而 sapper export 大致相当于 adapter-static，不过你可能更喜欢使用专为你要部署到的平台设计的适配器。

如果你正在使用 Vite 无法自动处理的文件类型的插件，则需要找到 Vite 等效项并将其添加到 Vite 配置 中。

src/client.js永久链接

此文件在 SvelteKit 中没有等效项。任何自定义逻辑（超出 sapper.start(...)）都应在你的 +layout.svelte 文件中，在 onMount 回调中表示。

src/server.js永久链接

使用 adapter-node 时，等效项是 自定义服务器。否则，此文件没有直接等效项，因为 SvelteKit 应用程序可以在无服务器环境中运行。

src/service-worker.js永久链接

从 @sapper/service-worker 导入的大部分内容在 $service-worker 中都有等效项

• files 保持不变
• routes 已删除
• shell 现在是 build
• timestamp 现在是 version

src/template.html永久链接

src/template.html 文件应重命名为 src/app.html。

删除 %sapper.base%、%sapper.scripts% 和 %sapper.styles%。将 %sapper.head% 替换为 %sveltekit.head%，将 %sapper.html% 替换为 %sveltekit.body%。<div id="sapper"> 不再是必需的。

src/node_modules永久链接

Sapper 应用程序中的一种常见模式是将你的内部库放在 src/node_modules 内部的目录中。这在 Vite 中不起作用，因此我们使用 src/lib 代替。

页面和布局永久链接

重命名的文件永久链接

路由现在仅由文件夹名称组成，以消除歧义，通向 +page.svelte 的文件夹名称对应于路由。请参阅 路由文档 以获取概述。以下显示了旧/新比较

您的自定义错误页面组件应从 _error.svelte 重命名为 +error.svelte。任何 _layout.svelte 文件也应同样重命名为 +layout.svelte。 任何其他文件都将被忽略。

导入永久链接

来自 @sapper/app 的 goto、prefetch 和 prefetchRoutes 导入应分别替换为来自 $app/navigation 的 goto、preloadData 和 preloadCode 导入。

来自 @sapper/app 的 stores 导入应被替换 — 请参阅下面的 存储 部分。

您以前从 src/node_modules 中的目录导入的任何文件都需要替换为 $lib 导入。

预加载永久链接

与以前一样，页面和布局可以导出一个函数，该函数允许在进行渲染之前加载数据。

此函数已从 preload 重命名为 load，现在它位于 +page.js（或 +layout.js）中，紧挨着它的 +page.svelte（或 +layout.svelte），并且其 API 已更改。它不再有两个参数 — page 和 session — 而只有一个 event 参数。

不再有 this 对象，因此也没有 this.fetch、this.error 或 this.redirect。相反，您可以从输入方法中获取 fetch，并且 error 和 redirect 现在都被抛出。

存储永久链接

在 Sapper 中，您可以像这样获取对提供的存储的引用

ts
import { stores } from '@sapper/app';
const { preloading, page, session } = stores();

page 存储仍然存在；preloading 已被包含 from 和 to 属性的 navigating 存储替换。page 现在具有 url 和 params 属性，但没有 path 或 query。

您在 SvelteKit 中以不同的方式访问它们。stores 现在是 getStores，但在大多数情况下，这是不必要的，因为您可以直接从 $app/stores 导入 navigating 和 page。

路由永久链接

不再支持正则表达式路由。请改用 高级路由匹配。

片段永久链接

以前，布局组件会收到一个 segment 属性，指示子片段。此功能已删除；您应该使用更灵活的 $page.url.pathname 值来导出您感兴趣的片段。

URL永久链接

在 Sapper 中，所有相对 URL 都是针对基本 URL 解析的，通常是 /，除非使用了 basepath 选项，而不是针对当前页面。

这导致了问题，在 SvelteKit 中不再出现这种情况。相反，相对 URL 现在针对当前页面（或 load 函数中 fetch URL 的目标页面）解析。在大多数情况下，使用根相对（即以 / 开头）URL 更容易，因为它们的含义不依赖于上下文。

<a> 属性永久链接

• sapper:prefetch 现在是 data-sveltekit-preload-data
• sapper:noscroll 现在是 data-sveltekit-noscroll

端点永久链接

在 Sapper 中，服务器路由 收到了 Node 的 http 模块公开的 req 和 res 对象（或 Polka 和 Express 等框架提供的增强版本）。

SvelteKit 被设计为与应用程序运行的位置无关，它可以在 Node 服务器上运行，但也可以在无服务器平台或 Cloudflare Worker 中运行。因此，您不再直接与 req 和 res 交互。您的端点需要更新以匹配新的签名。

为了支持这种与环境无关的行为，fetch 现在可在全局上下文中使用，因此您无需导入 node-fetch、cross-fetch 或类似的服务器端获取实现即可使用它。

集成永久链接

有关集成的详细信息，请参见 集成。

HTML 缩小器永久链接

Sapper 默认包含 html-minifier。SvelteKit 不包含此项，但你可以将其添加为生产依赖项，然后通过 钩子 使用它

ts
import { minify } from 'html-minifier';
import { building } from '$app/environment';

const minification_options = {
	collapseBooleanAttributes: true,
	collapseWhitespace: true,
	conservativeCollapse: true,
	decodeEntities: true,
	html5: true,
	ignoreCustomComments: [/^#/],
	minifyCSS: true,
	minifyJS: false,
	removeAttributeQuotes: true,
	removeComments: false, // some hydration code needs comments, so leave them in
	removeOptionalTags: true,
	removeRedundantAttributes: true,
	removeScriptTypeAttributes: true,
	removeStyleLinkTypeAttributes: true,
	sortAttributes: true,
	sortClassName: true
};

/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
	let page = '';

	return resolve(event, {
		transformPageChunk: ({ html, done }) => {
			page += html;
			if (done) {
				return building ? minify(page, minification_options) : page;
			}
		}
	});
}

请注意，当使用 vite preview 测试网站的生产版本时，prerendering 为 false，因此要验证缩小的结果，你需要直接检查构建的 HTML 文件。