「パスをたどるゲーム」とは ?

Javascript 開発では、自分で作成したコンポーネントを import する場合、次のように相対パスで指定します。

1import userStore from './stores/userStore'

階層が浅ければ特に問題ありません。
しかし、アプリケーションが複雑になり階層も深くなってくると、パス指定も煩雑になってしまいます。

1import userStore from '../../../stores/userStore'

ファイルを移動するとパスも変わります。
ですからフィアルを大きく移動するような場合は、ちまちまパスを修正してまわらなければならず、それはまるで苦行です。

無意味ですね。

これを回避するために モジュールにパスを追加しましょう。

対応方法

Laravel Mix は Webpack をラップしています。

そのため、Laravel プロジェクトのルート直下にある webpack.mix.js を編集し、Weback 設定の resolve を指定することで、パス指定を改善することができます。

設定 1 : modules を定義する

次のように resolove.modules に assets 以下を追加します。

1const path = require('path');
2mix.webpackConfig({
3  resolve: {
4    modules: [
5      path.resolve('./resources/assets'),
6      path.resolve('./node_modules'),
7    ]
8  }
9});

この定義を加えることで import を次のように書くことができます。

1import userStore from 'js/stores/userStore'

ファイルの改装を深くしても同じ記述で OK です。
いいですね !

設定 2 : alias を定義する

上記でも十分なのですが、もっとステキな方法がありました。

次のように resolove.modules に alias を追加します。

1const path = require('path');
2mix.webpackConfig({
3  resolve: {
4    alias: {
5      '@': path.resolve('./resources/assets'),
6    }
7  }
8});

この定義を加えることで import を次のように書くことができます。

1import userStore from '@/js/stores/userStore'

「 @ 付きは独自開発のファイルだな」と判別できることがポイントです。


設定 2 の方法は次のブログを参考にいたしました。

kitak's blog Kみたいなエンジニアになりたいブログ
Webpack を使っていてファイルの相対パスを書くのがつらくなったとき
https://kitak.hatenablog.jp/entry/2017/09/04/192010

まとめ

Laravel Mix で フロントエンド JavaScript の import をカンタンにするには

  • webpack.mix.js
  • resolove.modulesresolove.modules を追加する

でしたー。

つまらない作業は減らしてストレスレスな開発を楽しみましょう!

ノイズキャンセル機能が最強の SONY ヘッドフォン で音楽を楽しみながら行うコーディングも、かなりストレスレスですよ。
素晴らしい !