@/ エイリアス

Katashin
·

import 文を書くときに `@/path/to/module` みたいに `@/` を `src/` からのエイリアスに設定して、深いディレクトリからのインポートでも `../../../../` みたいに長い相対パスを書かなくてもすむようにするやり方は結構一般的に行われている。`~/` とかも同じ。

僕は今までこの記法に対して肯定的だった。書く量が減るし、記述がスッキリすることが多いし、特にデメリットもないと思っていたからだ。

しかし、最近これについて議論することがあったり、今までの自分の経験と照らし合わせてみて、積極的に採用しなくても良いと思うようになった。

  • モノレポで複数のビルド設定がある場合、アプリごとに同じ記法なのにインポート先が異なる

    • 混乱の元になる

    • 混乱するだけならまだ良いが、アプリのコードを使用するパッケージを作る場合にビルドがうまくいかなくて困る

      • 実体験として、アプリに定義されているコンポーネントのカタログを生成するサブパッケージを作った時、カタログのビルドではもちろん `@/` エイリアスを設定していないので困った

      • コンポーネントカタログは複数のアプリにまたがってコンポーネントをインポートしてたので、ディレクトリによってエイリアスの解決先を変える事が必要になった

  • エディターが発達して、auto import するようになったから、import 文を手書きすることが減った

    • 相対パスでも `@/` でも補完されるので書くコストは変わらない

    • 相対パスなら短くすむのに、`@/` 付きの長いインポート文が補完される場合もある

      • `components/` ディレクトリから他のコンポーネントをインポートする場合とか

        • `./OtherComponent.vue` でいいのに、`@/components/OtherComponent.vue` と補完される