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

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

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

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

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

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

無意味ですね。

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

対応方法

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});
10

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

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

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

設定 2 : alias を定義する

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

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

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

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

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

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


設定 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 ヘッドフォン で音楽を楽しみながら行うコーディングも、かなりストレスレスですよ。
素晴らしい !

ソニー SONY ワイヤレスノイズキャンセリングヘッドホン WH-1000XM2 B : Bluetooth/ハイレゾ 最大30時間連続再生 密閉型 マイク付 2017年 ブラック

ワイヤレスでもハイレゾ相当の高音質(LDAC/DSEE HX) 装着状態を分析し、ノイズキャンセリング特性を最適化するパーソナルNCオプティマイザー機能搭載 飛行機など大気の変化に応じてノイズキャンセリング特性を最適化。 電車の車内放送など、瞬時に外音を取り込めるクイックアテンションモード搭載。 ヘッドホン本体にあるタッチセンサーコントロールパネルで音楽操作が可能。 クイック充電対応(10分充電で70分再生) NFC搭載、ワンタッチペアリングで簡単接続。 Siri/Google Nowなどのスマートフォンの音声アシスタント機能を起動できる

Amazonで詳細を見る


Vue.js入門 基礎から実践アプリケーション開発まで

川口 和也,喜多 啓介,野田 陽平,手島 拓也,片山 真也
出版社:技術評論社  発売日:2018-09-22

Amazonで詳細を見る

動かして学ぶ!Vue.js開発入門 (NEXT ONE)

森 巧尚
出版社:翔泳社  発売日:2019-01-15

Amazonで詳細を見る

この記事の著者 Webrow (うぇぶろう)
Web アプリ開発、 Web 顧問 エンジニア、WordPress サポートいたします。