SvelteKit でエイリアスを使用してパスを簡単にする

SvelteKit についてまだ聞いたことがない場合は、美しいサイト kit.svelte.dev をチェックしてください. SvelteKit は React や Vue に似たコンポーネント フレームワークですが、重要な違いが 1 つあります.それは、仮想 DOM がないことです. Svelte は、洗練された高速なエンド ユーザー エクスペリエンスに組み込まれるコンパイラです. Svelte または SvelteKit を試したことがない場合は、30 分でブログを作成する簡単な紹介をご覧ください 🤯

リンク:

SvelteKit Docs

Svelte Docs

TLDR: エイリアスを設定するには、次の行を svelte.config.js に追加します.エイリアスを理解するために使用しているコード エディターについては、作成するエイリアスを jsconfig.json パスに追加する必要もあります.

//svelte.config.js
import path from 'path'
const config = {
    kit: {
        target: '#svelte',
        // add from here, plus the import path from 'path'
        vite: {
            resolve: {
                alias: {
                    // these are the aliases and paths to them
                    '@components': path.resolve('./src/lib/components'),
                    '@lib': path.resolve('./src/lib'),
                    '@utils': path.resolve('./src/lib/utils')
                }
            }
        }
    },
}
export default config

// jsconfig.json
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
             // name and path to aliases
            "@components": ["src/lib/components"],
            "@lib": ["src/lib"],
            "@utils": ["src/lib/utils"]
        }
    },
    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}

デフォルトのスターター

新しい SvelteKit プロジェクトを開始するには、フォルダーを配置するターミナルで npm init svelte@next app-name を実行します.ディレクトリを新しいアプリ cd app-name に変更し、npm i を実行して依存関係をインストールします.すぐに使用できる SvelteKit は、 $lib フォルダーの src/lib エイリアス セットアップを提供し、多数のモジュールが $app および $service-worker から利用可能です.それら以外では、独自のエイリアスを設定し、それらの使用方法を設定するのは私たち次第です.これらはすべて $ 構文を使用して使用しますが、必要に応じて lib フォルダーを @ または他のシンボルに変更できます.

デフォルトのエイリアスを変更する

デフォルトの $lib エイリアスを @lib に更新するには、svelte.config.js を更新してそれを使用することを vite に伝える必要があり、エイリアスはアプリケーションで機能します.コード エディターがエイリアスを理解するには、jsconfig.json ファイルを編集する必要があります. svelte.config.js の内部には、デフォルトでこの設定が表示されます.

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
  },
}

export default config

kit プロパティ内に、設定しているエイリアスの vite 構成を追加する必要があります.私は @ シンボルを好み、 @lib 、 @components 、および @utils エイリアスをセットアップする方法を示します.上部のノードからインクルードされたパス モジュールをインポートし、kit プロパティの下に vite プロパティを追加する必要があります.新しい svelte.config.js は次のようになります.

//svelte.config.js
import path from 'path'
const config = {
    kit: {
        target: '#svelte',
        // add from here, plus the import path from 'path'
        vite: {
            resolve: {
                alias: {
                    // these are the aliases and paths to them
                    '@components': path.resolve('./src/lib/components'),
                    '@lib': path.resolve('./src/lib'),
                    '@utils': path.resolve('./src/lib/utils')
                }
            }
        }
    },
}
export default config

次に、jsconfig.json ファイル内にそれらを設定する必要もあります.デフォルトでは、このようになります.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
  // here is the default $lib setup by SvelteKit
      "$lib/*": ["src/lib/*"]
    }
  },
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}

ご覧のとおり、デフォルトの $lib がこの構成に既に追加されています.これを更新して、他の 2 つのエイリアスのパスを追加する必要があります.更新されたファイルは次のようになります.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@components": ["src/lib/components"],
            "@lib": ["src/lib"],
            "@utils": ["src/lib/utils"]
        }
    },
    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}

パスの下に @components を追加し、 $lib を @lib に更新し、対応するパスで @utils を追加しました.

エイリアスの使用

ここで、ファイル内でエイリアスを使用する必要があります.スケルトン スターターには、アプリケーションのルート用の routes フォルダー以外のフォルダーはありません.このオプションを選択した場合、lib フォルダー内に src フォルダーを追加するだけで、@lib エイリアスを使用できます.設定したその他のパスとエイリアスは、lib フォルダー内にネストされています. lib フォルダー内に components フォルダーと utils フォルダーを追加します.フォルダ構造は次のようになります.

src
  - lib
    - components
    - utils
  - routes

lib 、 components 、または utils の内部で作成されたファイルは、絶対パスを入力するのではなく、エイリアスを使用してインポートできるようになりました.

<script>
import FileName from '@lib/FileName.js`
import ComponentName from '@components/ComponentName.svelte'
import UtilName from '@utils/UtilName.js`
</script>

以上です 🥳 これで、私たちが作成したすべてのエイリアスを使用することも、独自のエイリアスをさらに作成することもできます.さらに質問がある場合、または Svelte についてチャットしたい場合は、Twitter にいます 😃 乾杯!