ノベルティメディア

media

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

node_moduleの行方は何処!? Wordpress×Webpackでの構築に潜む罠について
橋本 大地
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を実装する方法を解説

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

この記事をシェアする
橋本 大地

橋本 大地

Engineer

バックエンドを経てフロントエンドの世界へ 持ち前のポジティブさと細やかさでノベルティを救う☆ 元気の源は愛妻弁当! 乾電池を通勤カバンに常備しているのできっと電池で動いています。

Webプロモーション・業務改善は
ノベルティひとつで完結

はじめての依頼にも
全力でサポートさせていただきます

メールでのお問い合わせ
各種サービス案内などをダウンロード

おすすめ記事/ PICKUP

    記事カテゴリー/ CATEGORY

      Webプロモーションや業務改善・DX化

      企業の課題はノベルティひとつで完結

      ホームページ制作などのWeb制作をはじめ、
      システム開発やマーケティング支援などワンストップで対応
      まずはお気軽にお問い合わせください

      お問い合わせ

      お電話またはメールでお気軽にお問い合わせください。

      資料ダウンロード

      各種サービスの資料をご用意しています