SvelteKit付録

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は、ノードアダプターを使用して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(...)以外のカスタムロジックは、onMountコールバック内で+layout.svelteファイルで表現する必要があります。

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に至るまでのフォルダ名はルートに対応します。ルーティングドキュメントの概要を参照してください。以下は古いものと新しいものの比較を示しています。

古いもの	新しいもの
routes/about/index.svelte	routes/about/+page.svelte
routes/about.svelte	routes/about/+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が変更されました。2つの引数（pageとsession）ではなく、単一のevent引数があります。

thisオブジェクトはなくなりました。そのため、this.fetch、this.error、this.redirectもありません。代わりに、入力メソッドからfetchを取得でき、errorとredirectの両方がスローされるようになりました。

ストア

Sapperでは、提供されたストアへの参照を次のように取得します。

import { module "@sapper/app"stores } from '@sapper/app';
const { const preloading: anypreloading, const page: anypage, const session: anysession } = module "@sapper/app"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は、basepathオプションが使用されていない限り、通常は/である基本URLに対して解決され、現在のページに対して解決されることはありませんでした。

これは問題を引き起こしたため、SvelteKitではもうそうではありません。代わりに、相対URLは現在のページ（またはload関数内のfetchURLの場合は宛先ページ）に対して解決されるようになりました。ほとんどの場合、意味がコンテキストに依存しないため、ルート相対（つまり、/で始まる）URLを使用する方が簡単です。

<a> 属性

sapper:prefetchはdata-sveltekit-preload-dataになりました。
sapper:noscrollはdata-sveltekit-noscrollになりました。

エンドポイント

Sapperでは、サーバールートは、Nodeのhttpモジュール（またはPolkaやExpressなどのフレームワークによって提供される拡張バージョン）によって公開されたreqとresオブジェクトを受け取っていました。

SvelteKitは、アプリがどこで実行されているかに関係なく設計されています。ノードサーバーで実行できますが、サーバーレスプラットフォームまたはCloudflare Workerでも実行できます。そのため、reqとresを直接操作することはなくなりました。エンドポイントは新しいシグネチャに合わせて更新する必要があります。

この環境非依存の動作をサポートするために、fetchはグローバルコンテキストで使用できるようになったため、それを使用する際にnode-fetch、cross-fetch、または同様のサーバーサイドフェッチ実装をインポートする必要はありません。

統合

統合の詳細については統合を参照してください。

HTMLミニファイア

Sapperはデフォルトでhtml-minifierを含んでいます。SvelteKitにはこれは含まれていませんが、prod依存関係として追加し、フックを使用して使用できます。

import { module "html-minifier"minify } from 'html-minifier';
import { const building: booleanSvelteKit analyses your app during the build step by running it. During this process, building is true. This also applies during prerendering.
building } from '$app/environment';

const const minification_options: {
    collapseBooleanAttributes: boolean;
    collapseWhitespace: boolean;
    conservativeCollapse: boolean;
    decodeEntities: boolean;
    html5: boolean;
    ignoreCustomComments: RegExp[];
    minifyCSS: boolean;
    ... 8 more ...;
    sortClassName: boolean;
}minification_options = {
	collapseBooleanAttributes: booleancollapseBooleanAttributes: true,
	collapseWhitespace: booleancollapseWhitespace: true,
	conservativeCollapse: booleanconservativeCollapse: true,
	decodeEntities: booleandecodeEntities: true,
	html5: booleanhtml5: true,
	ignoreCustomComments: RegExp[]ignoreCustomComments: [/^#/],
	minifyCSS: booleanminifyCSS: true,
	minifyJS: booleanminifyJS: false,
	removeAttributeQuotes: booleanremoveAttributeQuotes: true,
	removeComments: booleanremoveComments: false, // some hydration code needs comments, so leave them in
	removeOptionalTags: booleanremoveOptionalTags: true,
	removeRedundantAttributes: booleanremoveRedundantAttributes: true,
	removeScriptTypeAttributes: booleanremoveScriptTypeAttributes: true,
	removeStyleLinkTypeAttributes: booleanremoveStyleLinkTypeAttributes: true,
	sortAttributes: booleansortAttributes: true,
	sortClassName: booleansortClassName: true
};

/** @type {import('@sveltejs/kit').Handle} */
export async function function handle(input: {
    event: RequestEvent;
    resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
}): MaybePromise<...>@type{import('@sveltejs/kit').Handle}handle({ event: RequestEvent<Partial<Record<string, string>>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) {
	let let page: stringpage = '';

	return resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Partial<Record<string, string>>, string | null>event, {
		ResolveOptions.transformPageChunk?(input: {
    html: string;
    done: boolean;
}): MaybePromise<string | undefined>Applies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML
(they could include an element’s opening tag but not its closing tag, for example)
but they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.
@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml, done: booleandone }) => {
			let page: stringpage += html: stringhtml;
			if (done: booleandone) {
				return const building: booleanSvelteKit analyses your app during the build step by running it. During this process, building is true. This also applies during prerendering.
building ? module "html-minifier"minify(let page: stringpage, const minification_options: {
    collapseBooleanAttributes: boolean;
    collapseWhitespace: boolean;
    conservativeCollapse: boolean;
    decodeEntities: boolean;
    html5: boolean;
    ignoreCustomComments: RegExp[];
    minifyCSS: boolean;
    ... 8 more ...;
    sortClassName: boolean;
}minification_options) : let page: stringpage;
			}
		}
	});
}

サイトの製品版ビルドをテストするために`vite preview`コマンドを使用する場合、プリレンダリングは行われません（`prerendering`は`false`）。したがって、ファイルの縮小化結果を確認するには、生成されたHTMLファイルを直接確認する必要があります。

GitHubでこのページを編集する

前へ次へ

SvelteKit v2への移行追加のリソース