參考

模組

SvelteKit 為您的應用程式提供許多模組。

$app/environment永久連結

ts
import { browser, building, dev, version } from '$app/environment';

browser永久連結

如果應用程式在瀏覽器中執行，則為 true。

ts
const browser: boolean;

building永久連結

SvelteKit 會在 build 步驟中透過執行來分析您的應用程式。在此過程中，building 為 true。這也適用於預先渲染。

ts
const building: boolean;

dev永久連結

開發伺服器是否正在執行。這無法保證對應到 NODE_ENV 或 MODE。

ts
const dev: boolean;

version永久連結

config.kit.version.name 的值。

ts
const version: string;

$app/forms永久連結

ts
import { applyAction, deserialize, enhance } from '$app/forms';

applyAction永久連結

此動作會使用給定的資料更新目前頁面的 form 屬性，並更新 $page.status。如果發生錯誤，它會重新導向到最近的錯誤頁面。

ts
function applyAction<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	result: import('@sveltejs/kit').ActionResult<
		Success,
		Failure
	>
): Promise<void>;

deserialize永久連結

使用此函式來取消序列化從表單提交的回應。用法

ts
import { deserialize } from '$app/forms';

async function handleSubmit(event) {
  const response = await fetch('/form?/action', {
	method: 'POST',
	body: new FormData(event.target)
  });

  const result = deserialize(await response.text());
  // ...
}

ts
function deserialize<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	result: string
): import('@sveltejs/kit').ActionResult<Success, Failure>;

增強永久連結

此動作增強一個 <form> 元素，否則它將在沒有 JavaScript 的情況下運作。

submit 函式在提交時使用給定的 FormData 和應觸發的 action 呼叫。如果呼叫 cancel，則不會提交表單。你可以使用中止 controller 來取消提交，以防另一個提交開始。如果傳回函式，則使用伺服器回應呼叫該函式。如果沒有傳回任何內容，則會使用後備。

如果未設定此函式或其傳回值，則它

如果動作與表單位於同一頁面，則回退至使用傳回的資料更新 form prop
更新 $page.status
在沒有重新導向回應的情況下成功提交時，重設 <form> 元素並使所有資料失效
在重新導向回應的情況下重新導向
在發生意外錯誤的情況下重新導向至最近的錯誤頁面

如果你提供一個帶有回呼的自訂函式，並想要使用預設行為，請在你的回呼中呼叫 update。

ts
function enhance<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	form_element: HTMLFormElement,
	submit?: import('@sveltejs/kit').SubmitFunction<
		Success,
		Failure
	>
): {
	destroy(): void;
};

ts
import {
	afterNavigate,
	beforeNavigate,
	disableScrollHandling,
	goto,
	invalidate,
	invalidateAll,
	onNavigate,
	preloadCode,
	preloadData,
	pushState,
	replaceState
} from '$app/navigation';

當目前的元件掛載時，以及每當我們導航至新 URL 時，執行所提供的 callback 的生命週期函式。

afterNavigate 必須在元件初始化期間呼叫。只要元件已掛載，它就會保持作用中。

ts
function afterNavigate(
	callback: (
		navigation: import('@sveltejs/kit').AfterNavigate
	) => void
): void;

一個導航攔截器，在我們導航至新 URL 之前觸發，無論是透過按一下連結、呼叫 goto(...)，或使用瀏覽器的前進/後退控制項。

呼叫 cancel() 將防止導航完成。如果 navigation.type === 'leave' — 表示使用者正在導航離開應用程式 (或關閉分頁) — 呼叫 cancel 將觸發原生瀏覽器卸載確認對話框。在這種情況下，導航可能會或可能不會取消，具體取決於使用者的回應。

當導航不是到 SvelteKit 擁有的路由 (因此由 SvelteKit 的用戶端路由器控制) 時，navigation.to.route.id 將會是 null。

如果導航 (如果未取消) 會導致文件卸載 — 換句話說，'leave' 導航和 'link' 導航，其中 navigation.to.route === null — navigation.willUnload 為 true。

beforeNavigate 必須在元件初始化時呼叫。只要元件已掛載，它就會保持作用中。

ts
function beforeNavigate(
	callback: (
		navigation: import('@sveltejs/kit').BeforeNavigate
	) => void
): void;

如果在頁面在導航後 (例如在 onMount 或 afterNavigate 或動作中) 更新時呼叫，這會停用 SvelteKit 內建的捲軸處理。這通常不建議使用，因為它會破壞使用者的預期。

ts
function disableScrollHandling(): void;

傳回一個 Promise，當 SvelteKit 導航 (或導航失敗，此時 promise 會被拒絕) 到指定的 url 時，此 Promise 會解析。對於外部 URL，請使用 window.location = url，而不是呼叫 goto(url)。

ts
function goto(
	url: string | URL,
	opts?:
		| {
				replaceState?: boolean | undefined;
				noScroll?: boolean | undefined;
				keepFocus?: boolean | undefined;
				invalidateAll?: boolean | undefined;
				state?: App.PageState | undefined;
		  }
		| undefined
): Promise<void>;

導致任何屬於目前活動頁面的 load 函式重新執行，如果它們透過 fetch 或 depends 取決於有問題的 url。傳回一個 Promise，當頁面隨後更新時，此 Promise 會解析。

如果參數傳遞為 string 或 URL，它必須解析為傳遞給 fetch 或 depends 的相同 URL (包括查詢參數)。若要建立自訂識別碼，請使用以 [a-z]+: 開頭的字串 (例如 custom:state) — 這是有效的 URL。

function 參數可定義自訂謂詞。它接收完整的 URL，如果傳回 true，則導致 load 重新執行。如果您想根據模式而不是完全相符來驗證，這會很有用。

ts
// Example: Match '/path' regardless of the query parameters
import { invalidate } from '$app/navigation';

invalidate((url) => url.pathname === '/path');

ts
function invalidate(
	resource: string | URL | ((url: URL) => boolean)
): Promise<void>;

導致屬於目前活動頁面的所有 load 函式重新執行。傳回一個 Promise，當頁面隨後更新時，此 Promise 會解析。

ts
function invalidateAll(): Promise<void>;

一個生命週期函式，在我們導航到新的 URL 之前立即執行提供的 callback，但全頁面導航期間除外。

如果您傳回一個 Promise，SvelteKit 會在完成導航之前等待它解析。這允許您 — 例如 — 使用 document.startViewTransition。避免解析速度慢的 promise，因為導航會對使用者顯示為停滯狀態。

如果從 callback 傳回一個函式 (或解析為函式的 Promise)，則在 DOM 更新後會呼叫它。

onNavigate 必須在元件初始化期間呼叫。只要元件已掛載，它就會保持作用中。

ts
function onNavigate(
	callback: (
		navigation: import('@sveltejs/kit').OnNavigate
	) => MaybePromise<(() => void) | void>
): void;

以程式化方式匯入尚未擷取的路由程式碼。通常，你可能會呼叫此函式以加速後續導覽。

你可以透過任何相符的路徑名稱指定路由，例如 /about（以符合 src/routes/about/+page.svelte）或 /blog/*（以符合 src/routes/blog/[slug]/+page.svelte）。

與 preloadData 不同，此函式不會呼叫 load 函式。傳回一個 Promise，在匯入模組後解析。

ts
function preloadCode(pathname: string): Promise<void>;

以程式化方式預載入指定的頁面，這表示

確保已載入頁面的程式碼，以及
使用適當的選項呼叫頁面的載入函式。

這是 SvelteKit 在使用者點選或將滑鼠移到具有 data-sveltekit-preload-data 的 <a> 元素時觸發的相同行為。如果下一次導覽是前往 href，將會使用從載入傳回的值，讓導覽立即執行。傳回一個 Promise，在預載入完成後，使用執行新路由的 load 函式的結果解析。

ts
function preloadData(href: string): Promise<
	| {
			type: 'loaded';
			status: number;
			data: Record<string, any>;
	  }
	| {
			type: 'redirect';
			location: string;
	  }
>;

以程式化方式使用指定的 $page.state 建立新的歷程記錄項目。若要使用目前的網址，你可以將 '' 傳遞為第一個參數。用於淺層路由。

ts
function pushState(
	url: string | URL,
	state: App.PageState
): void;

以程式化方式使用指定的 $page.state 取代目前的歷程記錄項目。若要使用目前的網址，你可以將 '' 傳遞為第一個參數。用於淺層路由。

ts
function replaceState(
	url: string | URL,
	state: App.PageState
): void;

$app/paths永久連結

ts
import { assets, base, resolveRoute } from '$app/paths';

assets永久連結

與 config.kit.paths.assets 相符的絕對路徑。

如果指定 config.kit.paths.assets 的值，它將在 vite dev 或 vite preview 期間被替換為 '/_svelte_kit_assets'，因為資產尚未存在於它們最終的網址中。

ts
let assets:
	| ''
	| `https://${string}`
	| `http://${string}`
	| '/_svelte_kit_assets';

base永久連結

與 config.kit.paths.base 相符的字串。

範例用法：<a href="{base}/your-page">Link</a>

ts
let base: '' | `/${string}`;

resolveRoute永久連結

使用參數填入路徑 ID 以解析路徑名稱。

ts
function resolveRoute(
	id: string,
	params: Record<string, string | undefined>
): string;

$app/server永久連結

ts
import { read } from '$app/server';

read永久連結

從檔案系統讀取已匯入資源的內容

ts
function read(asset: string): Response;

$app/stores永久連結

ts
import { getStores, navigating, page, updated } from '$app/stores';

getStores永久連結

ts
function getStores(): {
	page: typeof page;

	navigating: typeof navigating;

	updated: typeof updated;
};

navigating永久連結

可讀取的儲存。當導航開始時，其值為 導航 物件，其中包含 from、to、type 和（如果 type === 'popstate'）delta 屬性。當導航結束時，其值會還原為 null。

在伺服器上，此儲存只能在元件初始化期間訂閱。在瀏覽器中，它可以隨時訂閱。

ts
const navigating: import('svelte/store').Readable<
	import('@sveltejs/kit').Navigation | null
>;

page永久連結

可讀取的儲存，其值包含頁面資料。

在伺服器上，此儲存只能在元件初始化期間訂閱。在瀏覽器中，它可以隨時訂閱。

ts
const page: import('svelte/store').Readable<
	import('@sveltejs/kit').Page
>;

updated永久連結

可讀取的儲存，其初始值為 false。如果 version.pollInterval 為非零值，SvelteKit 將輪詢應用程式的最新版本，並在偵測到新版本時將儲存值更新為 true。updated.check() 將強制立即檢查，而不論輪詢。

在伺服器上，此儲存只能在元件初始化期間訂閱。在瀏覽器中，它可以隨時訂閱。

ts
const updated: import('svelte/store').Readable<boolean> & {
	check(): Promise<boolean>;
};

$env/dynamic/private永久連結

此模組提供對執行時期環境變數的存取，由您執行的平台定義。例如，如果您使用 adapter-node（或執行 vite preview），這等於 process.env。此模組僅包含不以 config.kit.env.publicPrefix 開頭且以 config.kit.env.privatePrefix 開頭（如果已設定）的變數。

此模組無法匯入到用戶端程式碼中。

動態環境變數無法在預先渲染期間使用。

ts
import { env } from '$env/dynamic/private';
console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);

在 dev 中，$env/dynamic 始終包含來自 .env 的環境變數。在 prod 中，此行為將取決於您的轉接器。

$env/dynamic/public永久連結

類似於 $env/dynamic/private，但僅包含以 config.kit.env.publicPrefix（預設為 PUBLIC_）開頭的變數，因此可以安全地公開給用戶端程式碼。

請注意，公開的動態環境變數都必須從伺服器傳送至用戶端，導致網路要求較大 — 如果可能，請改用 $env/static/public。

動態環境變數無法在預先渲染期間使用。

ts
import { env } from '$env/dynamic/public';
console.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);

$env/static/private永久連結

環境變數由 Vite 載入自 .env 檔案和 process.env。例如 $env/dynamic/private，此模組無法匯入至用戶端程式碼。此模組僅包含變數，其不以 config.kit.env.publicPrefix 開頭，且以 config.kit.env.privatePrefix 開頭（如果已設定）。

與 $env/dynamic/private 不同，從此模組匯出的值會在建置時靜態注入至您的套件中，進而啟用最佳化，例如移除無用程式碼。

ts
import { API_KEY } from '$env/static/private';

請注意，您的程式碼中引用的所有環境變數都應宣告（例如在 .env 檔案中），即使在應用程式部署之前它們沒有值。

MY_FEATURE_FLAG=""

您可以從命令列覆寫 .env 值，如下所示

MY_FEATURE_FLAG="enabled" npm run dev

$env/static/public永久連結

類似於 $env/static/private，但它僅包含以 config.kit.env.publicPrefix 開頭的環境變數（預設為 PUBLIC_），因此可以安全地公開給用戶端程式碼。

值會在建置時靜態替換。

ts
import { PUBLIC_BASE_URL } from '$env/static/public';

$lib永久連結

這是 src/lib 的簡單別名，或指定為 config.kit.files.lib 的任何目錄。它允許您存取常見元件和公用程式模組，而不用 ../../../../ 這種無意義的寫法。

$lib/server永久連結

$lib 的子目錄。SvelteKit 會阻止您將 $lib/server 中的任何模組匯入至用戶端程式碼。請參閱僅伺服器模組。

$service-worker永久連結

ts
import { base, build, files, prerendered, version } from '$service-worker';

此模組僅供服務工作人員使用。

base永久連結

部署的 base 路徑。這通常等於 config.kit.paths.base，但它是從 location.pathname 計算的，這表示如果網站部署到子目錄，它仍會繼續正確運作。請注意，有一個 base 但沒有 assets，因為如果指定 config.kit.paths.assets，則無法使用服務工作人員。

ts
const base: string;

build永久連結

一個表示由 Vite 生成的檔案的 URL 字串陣列，適合使用 `cache.addAll(build)` 進行快取。在開發期間，這是一個空陣列。

ts
const build: string[];

filespermalink

一個表示靜態目錄中檔案的 URL 字串陣列，或由 `config.kit.files.assets` 指定的目錄。您可以使用 config.kit.serviceWorker.files 自訂包含在 `static` 目錄中的檔案

ts
const files: string[];

prerenderedpermalink

一個對應於預先渲染的頁面和端點的路徑名稱陣列。在開發期間，這是一個空陣列。

ts
const prerendered: string[];

versionpermalink

請參閱 config.kit.version。這對於在服務工作程式內產生唯一的快取名稱很有用，以便應用程式的後續部署可以使舊快取失效。

ts
const version: string;

@sveltejs/kitpermalink

ts
import {
	VERSION,
	error,
	fail,
	isHttpError,
	isRedirect,
	json,
	redirect,
	text
} from '@sveltejs/kit';

VERSIONpermalink

ts
const VERSION: string;

errorpermalink

擲出一個包含 HTTP 狀態碼和選用訊息的錯誤。在請求處理期間呼叫時，這將導致 SvelteKit 回傳一個錯誤回應，而不會呼叫 `handleError`。請確定您沒有捕捉擲出的錯誤，因為這會阻止 SvelteKit 處理它。

ts
function error(status: number, body: App.Error): never;

errorpermalink

ts
function error(
	status: number,
	body?: {
		message: string;
	} extends App.Error
		? App.Error | string | undefined
		: never
): never;

failpermalink

建立一個 ActionFailure 物件。

ts
function fail(status: number): ActionFailure<undefined>;

failpermalink

建立一個 ActionFailure 物件。

ts
function fail<
	T extends Record<string, unknown> | undefined = undefined
>(status: number, data: T): ActionFailure<T>;

isHttpErrorpermalink

檢查這是否是由 error 擲出的錯誤。

ts
function isHttpError<T extends number>(
	e: unknown,
	status?: T | undefined
): e is HttpError_1 & {
	status: T extends undefined ? never : T;
};

isRedirectpermalink

檢查這是否是由 redirect 擲出的重新導向。

ts
function isRedirect(e: unknown): e is Redirect_1;

jsonpermalink

從提供的資料建立一個 JSON Response 物件。

ts
function json(
	data: any,
	init?: ResponseInit | undefined
): Response;

redirectpermalink

重新導向一個請求。在請求處理期間呼叫時，SvelteKit 會回傳一個重新導向回應。請確定您沒有捕捉擲出的重新導向，因為這會阻止 SvelteKit 處理它。

ts
function redirect(
	status:
		| 300
		| 301
		| 302
		| 303
		| 304
		| 305
		| 306
		| 307
		| 308
		| ({} & number),
	location: string | URL
): never;

textpermalink

從提供的內文建立一個 Response 物件。

ts
function text(
	body: string,
	init?: ResponseInit | undefined
): Response;

@sveltejs/kit/hookspermalink

ts
import { sequence } from '@sveltejs/kit/hooks';

sequencepermalink

一個輔助函式，用於以類似中間件的方式對多個 handle 呼叫進行排序。handle 選項的行為如下

transformPageChunk 以相反順序套用並合併
preload 以順序套用，第一個選項「獲勝」，且其後的 preload 選項不會被呼叫
filterSerializedResponseHeaders 的行為與 preload 相同

src/hooks.server.js

ts
import { sequence } from '@sveltejs/kit/hooks';

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function first({ event, resolve }) {
	console.log('first pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			// transforms are applied in reverse order
			console.log('first transform');
			return html;
		},
		preload: () => {
			// this one wins as it's the first defined in the chain
			console.log('first preload');
		}
	});
	console.log('first post-processing');
	return result;
Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.7031
7031Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.}

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function second({ event, resolve }) {
	console.log('second pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			console.log('second transform');
			return html;
		},
		preload: () => {
			console.log('second preload');
		},
		filterSerializedResponseHeaders: () => {
			// this one wins as it's the first defined in the chain
		   console.log('second filterSerializedResponseHeaders');
		}
	});
	console.log('second post-processing');
	return result;
}

export const handle = sequence(first, second);

src/hooks.server.ts

ts
import { sequence } from '@sveltejs/kit/hooks';

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function first({ event, resolve }) {
	console.log('first pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			// transforms are applied in reverse order
			console.log('first transform');
			return html;
		},
		preload: () => {
			// this one wins as it's the first defined in the chain
			console.log('first preload');
		},
	});
	console.log('first post-processing');
	return result;
Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.7031
7031Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.}

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function second({ event, resolve }) {
	console.log('second pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			console.log('second transform');
			return html;
		},
		preload: () => {
			console.log('second preload');
		},
		filterSerializedResponseHeaders: () => {
			// this one wins as it's the first defined in the chain
			console.log('second filterSerializedResponseHeaders');
		},
	});
	console.log('second post-processing');
	return result;
}

export const handle = sequence(first, second);

上述範例會印出

first pre-processing
first preload
second pre-processing
second filterSerializedResponseHeaders
second transform
first transform
second post-processing
first post-processing

ts
function sequence(
	...handlers: import('@sveltejs/kit').Handle[]
): import('@sveltejs/kit').Handle;

@sveltejs/kit/nodepermalink

ts
import {
	createReadableStream,
	getRequest,
	setResponse
} from '@sveltejs/kit/node';

createReadableStreampermalink

將磁碟上的檔案轉換為可讀取串流

ts
function createReadableStream(file: string): ReadableStream;

getRequestpermalink

ts
function getRequest({
	request,
	base,
	bodySizeLimit
}: {
	request: import('http').IncomingMessage;
	base: string;
	bodySizeLimit?: number;
}): Promise<Request>;

setResponsepermalink

ts
function setResponse(
	res: import('http').ServerResponse,
	response: Response
): Promise<void>;

@sveltejs/kit/node/polyfillspermalink

ts
import { installPolyfills } from '@sveltejs/kit/node/polyfills';

installPolyfillspermalink

讓各種 Web API 可作為全域變數使用

crypto
File

ts
function installPolyfills(): void;

@sveltejs/kit/vitepermalink

ts
import { sveltekit } from '@sveltejs/kit/vite';

sveltekitpermalink

傳回 SvelteKit Vite 外掛程式。

ts
function sveltekit(): Promise<import('vite').Plugin[]>;

上一個命令列介面

下一個類型

模組

$app/environment永久連結

browser永久連結

building永久連結

dev永久連結

version永久連結

$app/forms永久連結

applyAction永久連結

deserialize永久連結

增強永久連結

$app/navigation永久連結

afterNavigate永久連結

beforeNavigate永久連結

disableScrollHandling永久連結

goto永久連結

invalidate永久連結

invalidateAll永久連結

onNavigate永久連結

preloadCode永久連結

preloadData永久連結

pushState永久連結

replaceState永久連結

$app/paths永久連結

assets永久連結

base永久連結

resolveRoute永久連結

$app/server永久連結

read永久連結

$app/stores永久連結

getStores永久連結

navigating永久連結

page永久連結

updated永久連結

$env/dynamic/private永久連結

$env/dynamic/public永久連結

$env/static/private永久連結

$env/static/public永久連結

$lib永久連結

$lib/server永久連結

$service-worker永久連結

base永久連結

build永久連結

filespermalink

prerenderedpermalink

versionpermalink

@sveltejs/kitpermalink

VERSIONpermalink

errorpermalink

errorpermalink

failpermalink

failpermalink

isHttpErrorpermalink

isRedirectpermalink

jsonpermalink

redirectpermalink

textpermalink

@sveltejs/kit/hookspermalink

sequencepermalink

@sveltejs/kit/nodepermalink

createReadableStreampermalink

getRequestpermalink

setResponsepermalink

@sveltejs/kit/node/polyfillspermalink

installPolyfillspermalink

@sveltejs/kit/vitepermalink

sveltekitpermalink