從 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.svelte (或 +layout.svelte) 旁邊的 +page.js (或 +layout.js) 中，而且其 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 值來推導你感興趣的區段。

網址永久連結

在 Sapper 中，所有相對網址都是根據基本網址解析的，通常是 /，除非使用了 basepath 選項，而不是根據目前頁面解析。

這會造成問題，在 SvelteKit 中不再是這樣。相反地，相對網址現在是根據目前頁面（或對於 load 函式中的 fetch 網址，則是根據目標頁面）解析。在大多數情況下，使用根相對（即以 / 開頭）網址較為容易，因為它們的意義與內容無關。

<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 檔案。