📛

Svelteでpath aliasを設定する

2023/07/29に公開

JavaScript

前提

svelteとsveltekitのバージョンは以下を利用してます。

"svelte": "^4.0.5",
"@sveltejs/kit": "^1.20.4"

はじめに

業務では主にReactを使っていますが、別ライブラリも触ってみたい気持ちが出てきたので、話題のSvelteを触ってみました。
初心者からすると、aliasの設定で少しクセを感じたので久しぶりに記事を書いてみることにしました。短めではありますが。

結論

svelteでaliasを設定する場合、tsconfigでpathsを設定するだけでなく、svelte.config.jsというファイルにも変更を加える必要があります。

やりたかったこと

ざっくりですが、以下のようなディレクトリ構成でsampleを作ってみました（隠しファイルは省略）。
src/routersから、src/featuresにあるファイルをimportしたかったです。
もちろん、ただimportするだけならaliasを利用する必要はありません。
が、相対パスでの読み込みは嫌だったのでaliasを利用することにしました。

.
├── README.md
├── package.json
├── src
│   ├── app.d.ts
│   ├── app.html
│   ├── features
│   ├── lib
│   └── routes
├── static
│   └── favicon.png
├── svelte.config.js
├── tsconfig.json
├── vite.config.ts
└── yarn.lock

問題

tsconfigに以下を追記しても正しく動きませんでした。。

tsconfig.json

"paths": {
  "$features": ["./src/features"],
  "$features/*": ["./src/features/*"]
}

解決策

svelte.config.jsというファイルにaliasを追加してあげればokみたいです。

svelte.config.js

/** @type {import('@sveltejs/kit').Config} */
const config = {
  ...

  kit: {
    adapter: adapter(),
    
    // ↓↓今回追加した内容↓↓
    alias: {
      "$features": "src/features",
      "$features/*": "src/features"
    }
  }
};

おまけ ~ svelte.configはtsで書けないのか？？ ~

おそらく現時点ではjsファイルで作成するしかなさそうです。
issueが立てられて議論はされてるみたいですね（ちゃんと読んでません）。

以上です。

前提

はじめに

結論

やりたかったこと

問題

解決策

おまけ ~ svelte.configはtsで書けないのか？？ ~

Discussion