lib-folderのようにSvelteKitでパスエイリアスを作成する方法

パスエイリアスの定義

デフォルトでSvelteKitによって定義されている「lib」フォルダの名前を変更する場合、または短いインポート用に他のディレクトリを追加する場合は、2つの構成を更新する必要があります。

Typescriptがインポートエイリアスを解決できるようにtsconfig
svelte-configもパスエイリアスを知っている必要があります

これらの変更により、「src」内のすべてのディレクトリをパスエイリアスを介して解決できるようになります。つまり、短くて単純なインポートを取得できます。

tsconfigファイルの更新

この例では、短いインポート用に新しいディレクトリを追加しますが、「lib」を置き換える場合も同じ変更が適用されます。

次のコードは、更新されたtsconfig.jsonを示しています。ここで、「paths」オブジェクトは、「mockserviceworker」の略語である新しいディレクトリ「msw」で拡張されています。このフォルダには、MSW関連のすべてのコードが含まれています。

{
  "compilerOptions": {
    ...
    "paths": {
      "$lib": ["src/lib"],
      "$lib/*": ["src/lib/*"],
      "$msw": ["src/msw"],
      "$msw/*": ["src/msw/*"]
    }
  },
  ...
}

svelte-configの更新

残っているのは、「svelte.config.js」という名前のSvelteKitによって消費される構成も更新することです。「vite」オブジェクトの構成を更新するだけです。カスタマイズによってデフォルトのフォルダが上書きされるため、「lib」フォルダも明示的に指定する必要があることに注意してください。つまり、「lib」フォルダはエイリアスではなくなります。

import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess";
import path from "path";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess(),

  kit: {
    adapter: adapter(),
    vite: {
      resolve: {
        alias: {
          $msw: path.resolve("./src/msw"),
          $lib: path.resolve("./src/lib")
        }
      }
    }
  }
};

export default config;