node_moduleの行方は何処！？　Wordpress×Webpackでの構築に潜む罠について

Webpack、使っていますか？
みなさんこんにちは、エンジニアの橋本です。
今回は、WEB制作の現場でも愛されるようになっているなぁと感じるこちら、Webpackのおはなし。

中級者向けの今回は、Webpackの基本説明を省きます。
私たちが主に使用している目的としては、jsファイルのバンドル化です。要するにたっくさんあるjsファイルを一つにまとめて、node_moduleの中のjsを読み込んで、読み込み時間を軽くバージョン管理も楽々にするという感じですね。
Wordpressを用いたWEB制作でも、Webpackを用いることは多いです。
そこで一つ大いなるテーマになることは、【環境構築】ですね。
個人的にあまり得意な分野ではありませんが、すんごく大切なのは明白。日々がんばります。

さて、今回の記事ではWebpackを動かす場所によって発生する、node_moduleがないよエラーについて、共有させていただきたいと思います！
また、WEB制作における、おすすめnode_moduleの展開先についてもしっかり書いていきます。

node_moduleがないよ...とは

さっそくエラーが起こった状況を再現してみましょう。
具体的な例として、Wordpressで制作するプロジェクト用にnpm installするとします。
場所はどこが良いでしょう。テーマ下あたりが良いでしょうか。それともWordpress構築ディレクトリの上でしょうか。
テーマ下ですとそうですね、git上ではignore定義すれば問題はありませんが、プラグインを使ってまるっとエクスポートしたいときに不便かもしれませんね。
エンジニアのみなさまはそれぞれ最適解を考え、構築していらっしゃると思います。
ただ、上記を始め様々な事情からWordpressの外側でnode_moduleを生成するケースがあります。しかも下記のような形で…

(例)
├wordpress
| └xxx…
└node
  ├project_1
  └node_module

wordpressを構築するディレクトリの上に一つディレクトリをかませ、そこでnode_moduleを展開すれば問題はないでしょう。一対一の構造もできやすいですし、管理もしやすと思います。
しかしながら、パスの取り方を本番と合わせたいなどを筆頭に、ルートディレクトリ直下にWordpressディレクトリを置きたい状況はあったりします。
私の場合は、複数プロジェクトを単一のnode_moduleで扱えたら楽だな、という発想が初手となって上記のようなディレクトリの取り方をしました。
ここでお気づきの方もいらっしゃると思います。落とし穴が発生です。

この状態で環境構築のテストをしていたところ、Webpackでjsをバンドルしようとしました。
するとめちゃ長いエラーに遭遇です。
エラー内容を要約すると、(例)jQueryのモジュールがないよと。色々とディレクトリ漁ったけれども、node_moduleがないよ。と申しておりました。
Webpackはjsファイルなどをimportできるので、その参照に問題があるとのこと。
ここでpackage.jsonを確認します。jQueryはありますし、npm installも他のパッケージは動いているので根本は問題なし。
なんならnode_moduleの中も確認しにいきます。jQueryはちゃんといます。
こうなると首が斜めになってしまいますね。ただ、当たり前のことを見落としています。

そうですね、シンプルにnode_modulesがないためです。
日本語的に怪しくなってきましたが厳密には、node_moduleはあるけれど、指定の場所にはありませんということです。
もちろん指定をしていないので、当然といえば当然ですが、中級者のみなさんはこのようなトリッキーな位置にnode_moduleを置いた経験がない方も多いのではないでしょうか。
推奨している参考サイトもほぼなく、地味に困りました。

node_modules、デフォルトの参照先

その参照先、デフォルトでは相対パス上の【node_modules】です。なんとなく使っていて気づかなかったのですが、なければ一つ上の階層にnode_moduleがないか探りにいって参照します。
とっても便利と思いながらも、上記のディレクトリ構成では当然引っかからないため、軽く絶望です。
しかしながら、これを解決してくれる救世主が【resolve.modules】でした。

(例)
module.exports = {
  resolve: {
    modules: path.resolve('./node_modules')
  },
};

こちらのmodulesの中身を指定することで、デフォルトの設定よりも先に指定の場所を参照してくれます。
すると予定していた場所で上手くnode_moduleを探し出してくれるわけです！

これを応用すれば、かなり良い感じにWebpackが使いまわせるのではないかなーと思います。
システム開発の現場ではあまり気になりませんでしたが、WEB制作では1サイトごとにnpm installすると、かなりの数のnode_moduleが生成されることになります。
しかも割と使っているモジュールは変わらないことも多いので、単純にPCが圧迫されてしまいますよね。

(例)
├wordpress
| └xxx...
└node
  ├2018-2020
    └node_module
  └2020-2022
     └node_module
  └special_plan
     └node_module

このような形で、ある程度パターン化された環境構築を行っておけば、同一系統のサイトを制作する際の初期構築コストが軽減されるかもしれませんね！

まとめ

というわけで今回は【Webpackを動かす場所によって発生する、node_moduleがないよエラー】を解決する方法をご紹介させていただきました。
本当に大事なことなので2回言っちゃいますが、これを解決する糸口を見つけるのがめちゃ困難でした。。いくつかの記事サイト様を参考に、情報をくっつけながら探しました。。
node_moduleの配置場所を自在に操ることによって、WEB制作の現場も高速化が進んでいければ嬉しいです！
それではまた！

↓ この記事をご覧の方へおすすめの記事はこちら ↓

気づきそうで気づかない！　wp_enqueue_scriptの第三引数が生む落とし穴！

ReactでアクセシブルなアコーディオンUIを実装する方法を解説

コードもアート！？ ソースコードの著作権について知っておこう！