Skip to main content

Configuration

Edit this page on GitHub

プロジェクトの設定は、プロジェクトの root にある svelte.config.js ファイルに保存されています。SvelteKit だけでなく、エディタ拡張(editor extensions)など Svelte とインテグレーションする他のツールでもこれが使用されます。

ts
import adapter from '@sveltejs/adapter-auto';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter()
}
};
 
export default config;
ts
interface Config {}
ts
compilerOptions?: CompileOptions;
  • default {}

Options passed to svelte.compile.

ts
extensions?: string[];
  • default [".svelte"]

List of file extensions that should be treated as Svelte files.

ts
kit?: KitConfig;

SvelteKit options

ts
package?: {
source?: string;
dir?: string;
emitTypes?: boolean;
exports?(filepath: string): boolean;
files?(filepath: string): boolean;
};
ts
preprocess?: any;

Preprocessor options, if any. Preprocessing can alternatively also be done through Vite's preprocessor capabilities.

ts
[key: string]: any;

Any additional options required by tooling that integrates with Svelte.

kit プロパティは SvelteKit を設定し、以下のプロパティを持つことができます:

adapter

  • default undefined

adapter は、vite build の実行中に実行されます。これによってどのプラットフォーム向けにアウトプットを変換するか決定します。

alias

  • default {}

import 文の値を置き換えるのに使用されるエイリアスを0個以上含むオブジェクトです。これらのエイリアスは自動的に Vite と TypeScript に渡されます。

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
alias: {
// this will match a file
'my-file': 'path/to/my-file.js',
 
// this will match a directory and its contents
// (`my-directory/x` resolves to `path/to/my-directory/x`)
'my-directory': 'path/to/my-directory',
 
// an alias ending /* will only match
// the contents of a directory, not the directory itself
'my-directory/*': 'path/to/my-directory/*'
}
}
};

ビルトインの $lib エイリアスはパッケージングに使用されるため、config.kit.files.lib でコントロールされます。

jsconfig.jsontsconfig.json に必要なエイリアス設定を、SvelteKit に自動的に生成させるためには、npm run dev を実行する必要があります。

appDir

  • default "_app"

ビルドされた JS と CSS (とインポートされたアセット) が提供されるディレクトリで、paths.assets との相対です。(ファイル名にはそれ自体にコンテンツベースのハッシュが含まれるため、無期限にキャッシュすることができます)。先頭と末尾を / にすることはできません。

csp

Content Security Policy の設定です。CSP は、読み込むことができるリソースを、そのリソースの場所(ドメインなど)で制限することによって、クロスサイトスクリプティング(XSS)攻撃からユーザーを守るのに役立ちます。例えば、このような設定の場合…

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
csp: {
directives: {
'script-src': ['self']
},
reportOnly: {
'script-src': ['self']
}
}
}
};
 
export default config;

…外部サイトのスクリプトの読み込みを防ぐことができます。SvelteKit は、生成されるインラインスタイルとスクリプトに対し、指定したディレクティブを nonce または hash (mode の設定による) で補強します。

src/app.html の script や link に nonce を追加するには、%sveltekit.nonce% プレースホルダーをお使いください (例えば <script nonce="%sveltekit.nonce%">)。

ページがプリレンダリングされる場合、CSP ヘッダーは <meta http-equiv> タグで追加されます (この場合、frame-ancestorsreport-urisandbox ディレクティブは無視されることにご注意ください)。

mode'auto' の場合、SvelteKit は動的にレンダリングされるページには nonce を使用し、プリレンダリングされたページには hash を使用します。プリレンダリングされたページに nonce を使用するのは安全ではないため、禁止されています。

多くの Svelte transitions はインラインの <style> 要素を作成することで動作することにご注意ください。アプリでこれらを使用する場合は、style-src ディレクティブを指定しないようにするか、unsafe-inline を追加する必要があります。

ts
mode?: 'hash' | 'nonce' | 'auto';

<script><style> 要素の制限に hash と nonce のどちらを使用するか。'auto' の場合、プリレンダリングされたページには hash を、動的にレンダリングされるページには nonce が使用されます。

ts
directives?: CspDirectives;

Content-Security-Policy ヘッダーに追加されるディレクティブです。

ts
reportOnly?: CspDirectives;

Content-Security-Policy-Report-Only ヘッダーに追加されるディレクティブです。

csrf

cross-site request forgery 攻撃からの防御の設定です。

ts
checkOrigin?: boolean;
  • default true

POST フォーム送信時、受信した origin ヘッダーをチェックしてサーバーのオリジン(origin)と一致するか検証することを行うかどうか。

別のオリジンにあるあなたのアプリに対して POST フォーム送信をできるようにするには、このオプションを無効にする必要があります。ご注意を!

env

環境変数設定

ts
dir?: string;
  • default "."

.env ファイルを探すディレクトリです。

ts
publicPrefix?: string;
  • default "PUBLIC_"

クライアントサイドコードに公開されても安全な環境変数に付与される接頭辞です。$env/static/public$env/dynamic/public をご覧ください。Vite の環境変数ハンドリングを使用する場合は、別途 Vite の envPrefix を設定する必要があることにご注意ください - ただし、通常この機能を使う必要はありません。

files

プロジェクト内の各種ファイルの場所。

ts
assets?: string;
  • default "static"

favicon.icomanifest.json のように、不変の URL を持つ、何も処理されない静的なファイルを置く場所です

ts
hooks?: {}
ts
client?: string;
  • default "src/hooks.client"

クライアントの hooks のロケーションです。

ts
server?: string;
  • default "src/hooks.server"

サーバーの hooks のロケーションです。

ts
lib?: string;
  • default "src/lib"

コードベース全体から $lib としてアクセスできる、アプリの内部ライブラリ

ts
params?: string;
  • default "src/params"

parameter matchers を置くディレクトリ

ts
routes?: string;
  • default "src/routes"

アプリの構造を定義するファイル (Routing をご覧ください)

ts
serviceWorker?: string;
  • default "src/service-worker"

service worker のエントリーポイントのロケーション (Service workers をご覧ください)

ts
appTemplate?: string;
  • default "src/app.html"

HTML レスポンスのテンプレートのロケーション

ts
errorTemplate?: string;
  • default "src/error.html"

フォールバックエラーレスポンスのテンプレートのロケーション

inlineStyleThreshold

  • default 0

HTML の head の <style> ブロックの中のインライン CSS です。このオプションには、インライン化される CSS ファイルの最大長を数値で指定します。ページに必要な CSS ファイルで、この数値より小さいものは全てマージされ、<style> ブロックにインライン化されます。

これによって初期リクエストが減り、First Contentful Paint スコアを改善することができます。しかし、より大きな HTML が生成され、ブラウザのキャッシュの有効性を低下させます。慎重にお使いください。

moduleExtensions

  • default [".js", ".ts"]

SvelteKit がモジュールとして扱うファイルの拡張子の配列です。config.extensionsconfig.kit.moduleExtensions のいずれにもマッチしない拡張子のファイルは、ルーターから無視されます。

outDir

  • default ".svelte-kit"

SvelteKit が devbuild 中にファイルを書き込むディレクトリです。このディレクトリはバージョンコントロールから除外すると良いでしょう。

paths

ts
assets?: string;
  • default ""

アプリのファイルが提供される絶対パス(absolute path)です。これは、何らかのストレージバケットからファイルを提供する場合に有用です。

ts
base?: string;
  • default ""

ルート相対なパス(root-relative path)です。空文字(empty string)以外を指定する場合、先頭は / を付ける必要があり、末尾には / を付けてはいけません (例: /base-path)。アプリがどこから提供されるかを指定することで、アプリをルートではないパス(non-root path)で動作させることができます。ルート相対(root-relative)なリンクには、先頭に base の値を追加しなければなりません。そうしないとリンクが base ではなくドメインのルート(root)を指してしまいます(これはブラウザの動作によるものです)。これを行うには、base from $app/paths をインポートして <a href="{base}/your-page">Link</a> のようにします。もし、これを頻繁に書くようであれば、再利用可能なコンポーネントに抽出するのも良いでしょう。

prerender

プリレンダリング をご覧ください。

ts
concurrency?: number;
  • default 1

同時にいくつのページをプリレンダリングできるか。JS はシングルスレッドですが、プリレンダリングのパフォーマンスがネットワークに縛られている場合(例えば、リモートの CMS からコンテンツをロードしている場合)、ネットワークの応答を待っている間に他のタスクを処理することで高速化することができます。

ts
crawl?: boolean;
  • default true

SvelteKit が entries からリンクをたどってプリレダリングするページを探すかどうか。

ts
entries?: Array<'*' | `/${string}`>;
  • default ["*"]

プリレンダリングするページ、または (crawl: true の場合は) クローリングを開始するページの配列。* 文字列は、全ての動的でないルート(route) (つまり、[parameters] がないページです。なぜなら、SvelteKit は その parameters がどんな値を持つかわからないからです) が含まれます。

ts
  • default "fail"

アプリのプリレンダリング中に発生した HTTP エラーに対する応答方法。

  • 'fail' — ビルドを失敗させます
  • 'ignore' - 失敗(failure)を無視して継続させます
  • 'warn' — 継続しますが、警告(warning)をプリントします
  • (details) => voidstatuspathreferrerreferenceTypemessage プロパティを持つ details オブジェクトを引数に取るカスタムのエラーハンドラです。この関数から throw されると、ビルドが失敗します
ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
prerender: {
handleHttpError: ({ path, referrer, message }) => {
// ignore deliberate link to shiny 404 page
if (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {
return;
}
 
// otherwise fail the build
throw new Error(message);
}
}
}
}
};
ts
  • default "fail"

あるプリレンダリングページから別のプリレンダリングページへのハッシュリンクが、リンク先ページの id に対応していない場合の応答方法

  • 'fail' — ビルドを失敗させます
  • 'ignore' - 失敗(failure)を無視して継続させます
  • 'warn' — 継続しますが、警告(warning)をプリントします
  • (details) => voidpathidreferrersmessage プロパティを持つ details オブジェクトを引数に取るカスタムのエラーハンドラです。この関数から throw されると、ビルドが失敗します
ts
origin?: string;
  • default "http://sveltekit-prerender"

origin — プリレンダリング時の url.origin の値です。レンダリングされたコンテンツに含まれていると有用な場合があります。

serviceWorker

ts
register?: boolean;
  • default true

service worker が存在する場合、自動的に登録するかどうか。

ts
files?(filepath: string): boolean;
  • default (filename) => !/\.DS_Store/.test(filename)

static ディレクトリにあるどのファイルを $service-worker.files で利用可能にするかを決定します。

version

アプリが使用されているときにアプリの新しいバージョンをデプロイするとクライアントサイドのナビゲーションにバグが発生することがあります。次に開くページのコードがすでにロードされている場合、そこに古いコンテンツがある可能性があります。そうでなくとも、アプリのルートマニフェスト(route manifest)が、もう存在しない JavaScript ファイルを指している可能性があります。SvelteKit は、ここで指定された name (デフォルトではビルドのタイムスタンプ) を使用して新しいバージョンがデプロイされたことを検知し、従来のフルページナビゲーションにフォールバックすることにより、この問題を解決しています。

pollInterval を 0 以外の値に設定した場合、SvelteKit はバックグラウンドで新しいバージョンをポーリングし、それを検知すると updated ストアの値を true にします。

ts
name?: string;
  • default Date.now().toString()

アプリの現在のバージョンの文字列です。

ts
pollInterval?: number;
  • default 0

バージョンの変更をポーリングするインターバル(ミリ秒)です。これが 0 の場合、ポーリングは発生しません。