Configuration

プロジェクトの設定は svelte.config.js ファイルにあります。全ての値はオプションです。オプションのデフォルトと完全なリストはこちらです:

svelte.config.js

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
  // options passed to svelte.compile (https://svelte.dev/docs#compile-time-svelte-compile)
  compilerOptions: {},
 
  // an array of file extensions that should be treated as Svelte components
  extensions: ['.svelte'],
 
  kit: {
    adapter: undefined,
    alias: {},
    appDir: '_app',
    browser: {
      hydrate: true,
      router: true
    },
    csp: {
      mode: 'auto',
      directives: {
        'default-src': undefined
        // ...
      }
    },
    endpointExtensions: ['.js', '.ts'],
    files: {
      assets: 'static',
      hooks: 'src/hooks',
      lib: 'src/lib',
      params: 'src/params',
      routes: 'src/routes',
      serviceWorker: 'src/service-worker',
      template: 'src/app.html'
    },
    floc: false,
    inlineStyleThreshold: 0,
    methodOverride: {
      parameter: '_method',
      allowed: []
    },
    outDir: '.svelte-kit',
    package: {
      dir: 'package',
      emitTypes: true,
      // excludes all .d.ts and files starting with _ as the name
      exports: (filepath) => !/^_|\/_|\.d\.ts$/.test(filepath),
      files: () => true
    },
    paths: {
      assets: '',
      base: ''
    },
    prerender: {
      concurrency: 1,
      crawl: true,
      default: false,
      enabled: true,
      entries: ['*'],
      onError: 'fail'
    },
    routes: (filepath) => !/(?:(?:^_|\/_)|(?:^\.|\/\.)(?!well-known))/.test(filepath),
    serviceWorker: {
      register: true,
      files: (filepath) => !/\.DS_Store/.test(filepath)
    },
    trailingSlash: 'never',
    version: {
      name: Date.now().toString(),
      pollInterval: 0
    },
    vite: () => ({})
  },
 
  // SvelteKit uses vite-plugin-svelte. Its options can be provided directly here.
  // See the available options at https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md
 
  // options passed to svelte.preprocess (https://svelte.dev/docs#compile-time-svelte-preprocess)
  preprocess: null
};
 
export default config;

adapterpermalink

svelte-kit build を実行するのに必要で、異なるプラットフォーム向けにアウトプットがどのように変換されるかを決定します。Adapters をご参照ください。

aliaspermalink

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

例えば、components フォルダと utils フォルダのエイリアスを追加する場合は以下の通りです:

svelte.config.js

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    alias: {
      $components: 'src/components',
      $utils: 'src/utils'
    }
  }
};

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

appDirpermalink

ビルドされた JS と CSS(およびインポートされたアセット)が提供される paths.assets からの相対ディレクトリ(ファイル名にはコンテンツベースのハッシュが含まれており、つまり、無期限にキャッシュすることができます)。先頭または末尾が / であってはいけません。

browserpermalink

以下の boolean 値のうち、0 個以上を含むオブジェクトです:

hydrate — サーバーでレンダリングされた HTML をクライアントサイドのアプリでハイドレート(hydrate) するかどうかを指定します。(アプリ全体でこれを false に設定することはめったにありません)
router — クライアントサイドのルーター(router)をアプリ全体で有効または無効にします。

csppermalink

以下の値のうち、0 個以上を含むオブジェクトです:

mode — 'hash'、'nonce'、または 'auto'
directives — [directive]: value[] ペアのオブジェクト

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

svelte.config.js

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

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

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

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

endpointExtensionspermalink

SvelteKit がエンドポイントとして扱うファイル拡張子の配列です。config.extensions と config.kit.endpointExtensions のどちらにも一致しない拡張子を持つファイルは、ルーターから無視されます。

filespermalink

以下の string 値のうち、0 個以上を含むオブジェクトです:

assets — favicon.ico or manifest.json のような、何も処理する必要もなく、安定した URL を持つべき静的ファイルを配置する場所
hooks — hooks モジュールのロケーション(Hooks をご参照ください)
lib — コードベース全体から $lib でアクセスできる、アプリの内部ライブラリ
params — parameter matchers を含むディレクトリ
routes — アプリの構造を定義するファイル(ルーティングをご参照ください)
serviceWorker — Service Worker のエントリーポイントのロケーション(Service workers をご参照ください)
template — HTML レスポンス用テンプレートのロケーション

flocpermalink

Google の FLoC は、Electronic Frontier Foundation がユーザーのプライバシーに害を及ぼすと判断したターゲティング広告のテクノロジーです。Chrome 以外のブラウザは実装を断わりました。

GitHub Pages などのサービスと同様に、SvelteKit は自動的に FLoC をオプトアウトすることでユーザーを保護します。floc を true にしない限り、レスポンスに以下のヘッダを追加します:

Permissions-Policy: interest-cohort=()

これはサーバーレンダリングされたレスポンスにのみ適用されます — プリレンダリングされたページ(例えば adapter-static によって作成されたページ) のヘッダは、ホスティングプラットフォームによって決定されます。

inlineStyleThresholdpermalink

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

この結果、最初のリクエストが少なくなり、First Contentful Paint スコアを改善することができます。しかし、HTML 出力が大きくなり、ブラウザキャッシュの効果が低下します。慎重に使用してください。

methodOverridepermalink

HTTP Method Overrides をご参照ください。以下のうち、0 個以上を含むオブジェクトです:

parameter — 使いたいメソッドの値を渡すのに使用するクエリパラメータ名
allowed - オリジナルのリクエストメソッドを上書きするときに使用することができる HTTP メソッドの配列

outDirpermalink

SvelteKit が dev と build のときにファイルを書き込むディレクトリです。このディレクトリをバージョン管理から除外する必要があります。

packagepermalink

パッケージ作成に関連するオプションです。

dir - 出力ディレクトリ
emitTypes - デフォルトでは、svelte-kit package は自動的にパッケージの型を .d.ts ファイル形式で生成します。型の生成は設定で変更できますが、常に型を生成することがエコシステムの品質にとってベストであると私たちは信じています。false に設定するときは、十分な理由があることを確認してください(例えば、代わりに手書きの型定義を提供したい場合など)
exports - (filepath: string) => boolean という型を持つ関数。true の場合、ファイルパスが package.json の exports フィールドに含まれるようになります。package.json のソースにある既存の値は、オリジナルの exports フィールドの値が優先されてマージされます
files - (filepath: string) => boolean という型を持つ関数。true の場合、ファイルは処理され、dir で指定された最終的な出力フォルダにコピーされます

高度な filepath マッチングには、exports と files オプションを globbing ライブラリと組み合わせて使用することができます:

svelte.config.js

ts
import mm from 'micromatch';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    package: {
      exports: (filepath) => {
        if (filepath.endsWith('.d.ts')) return false;
        return mm.isMatch(filepath, ['!**/_*', '!**/internal/**']);
      },
      files: mm.matcher('!**/build.*')
    }
  }
};
 
export default config;

pathspermalink

以下の string 値のうち、0 個以上を含むオブジェクトです:

assets — アプリのファイルが提供される絶対パス。これは、何らかのストレージバケットからファイルを提供する場合に便利です
base — ルート相対パス。空文字以外を指定する場合、先頭は / で始めなければならず、末尾は / で終わってはいけません (例 /base-path)。アプリがどこから提供されるかを指定することで、アプリを非ルートパスで動作させることができます

prerenderpermalink

プリレンダリング(Prerendering) をご参照ください。以下のうち、0 個以上を含むオブジェクトです:

concurrency — 同時にいくつのページをプリレンダリングできるか。JS はシングルスレッドですが、プリレンダリングのパフォーマンスがネットワークに縛られている場合(例えば、リモートの CMS からコンテンツをロードしている場合)、ネットワークの応答を待っている間に他のタスクを処理することで高速化することができます
crawl — SvelteKit がシードページからリンクをたどってプリレンダリングするページを見つけるかどうかを決定します
default — true に設定すると、export const prerender = false を含まないページをプリレンダリングします
enabled — false に設定すると、プリレンダリングを完全に無効化できます
entries — プリレンダリングするページ、またはクロールを開始するページ(crawl: true の場合)の配列。* 文字列には、全ての動的ではないルート(routes)(すなわち [parameters] を含まないページ) が含まれます

onError

'fail' — (デフォルト) リンクをたどったときにルーティングエラーが発生した場合、ビルドを失敗させます
'continue' — ルーティングエラーが発生しても、ビルドを継続させます

function — カスタムエラーハンドラにより、ログを記録したり、throw してビルドを失敗させたり、クロールの詳細に基づいて任意の他のアクションを実行したりすることができます

ts
import adapter from '@sveltejs/adapter-static';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    prerender: {
      onError: ({ status, path, referrer, referenceType }) => {
        if (path.startsWith('/blog')) throw new Error('Missing a blog page!');
        console.warn(
          `${status} ${path}${referrer ? ` (${referenceType} from ${referrer})` : ''}`
        );
      }
    }
  }
};
 
export default config;

routespermalink

(filepath: string) => boolean という関数で、どのファイルがルート(routes)を作成し、どれがプライベートモジュールとして扱われるか決定します。

serviceWorkerpermalink

以下の値のうち、0 個以上を含むオブジェクトです:

register - false を設定した場合、service worker の自動登録を無効にします。
files - (filepath: string) => boolean という型を持つ関数。true の場合、与えられたファイルが $service-worker.files で利用可能になります。それ以外の場合は除外されます。

trailingSlashpermalink

URL を解決する際に、末尾のスラッシュ (trailing slashes) を削除するか、追加するか、無視するかどうかを指定します (これはページ (pages) にのみ適用され、エンドポイント (endpoints) には適用されないことにご注意ください)。

'never' — /x/ を /x にリダイレクトします
'always' — /x を /x/ にリダイレクトします
'ignore' — 末尾のスラッシュを自動で追加したり削除したりしません。/x と /x/ は同等に扱われます

このオプションはプリレンダリングにも影響します。もし trailingSlash が always なら、/about のようなルートは about/index.html ファイルを生成し、それ以外の場合は about.html を生成し、静的な web サーバーの規約に従います。

末尾のスラッシュを無視することは推奨されません — 相対パスのセマンティクスが異なるため(/x からの ./y は /y となりますが、/x/ からは /x/y となります)、/x と /x/ は別の URL として扱われるので SEO に悪影響を及ぼします。もしこのオプションを使用する場合は、handle 関数の中で request.path に末尾のスラッシュを条件に応じて追加または削除するロジックを確実に実装してください。

versionpermalink

以下の値のうち、0 個以上を含むオブジェクトです:

name - 現在のアプリのバージョン文字列
pollInterval - バージョンの変更をポーリングするインターバル(ミリ秒)

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

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

vitepermalink

Vite のコンフィグオブジェクトか、またはそれを返す関数を指定します。Vite と Rollup のプラグインを plugins オプション経由で渡すことができ、イメージ最適化、Tauri、WASM、Workbox などのサポートなど、高度な方法でビルドをカスタマイズすることができます。SvelteKit が特定の設定値に依存しているため、特定のビルドに関連しているオプションを設定することはできません。

previous Command Line Interface

next Types