千葉県船橋市のホームページ制作・マーケティングの株式会社ノベルティ

COLUMN

コラム

2022.02.24

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

橋本大地

JavaScript

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制作の現場も高速化が進んでいければ嬉しいです!
それではまた!

橋本大地

プロジェクトリーダー

バックエンドを経てフロントエンドの世界へ
持ち前のポジティブさと細やかさでノベルティを救う☆
元気の源は愛妻弁当!
自家用マシンでMacbookを購入することを夢見ています。
HOME | コラム | node_moduleの行方は何処!? Wordpress×Webpackでの構築に潜む罠について
CONTACT

お問い合わせ

お見積りの依頼やWEBに関する
お悩みがございましたら、
お電話かメールからお問い合わせください。

047-405-2227

お電話対応可能時間 平日/10:00~17:00

〒273-0005 千葉県船橋市本町5-1-1 船橋AUビル4階

船橋情報配信メディア

トコトコふなばし船橋情報配信メディア|トコトコふなばし

【船橋トコトコ大冒険メディア】として船橋の地域情報メディア、トコトコふなばしを運営。

船橋の観光スポットやイベント、グルメなど船橋の魅力を、熱く!ディープに!紹介しています。

また、船橋で活躍されている個人・企業の皆様への取材も実施しています。

船橋情報配信メディア|トコトコふなばしのとこっとちゃん

トコトコふなばしのキャラクター

とこっとちゃん

船橋に迷い込んでから船橋が気に入ってしまったトコ!

船橋を散歩しながら船橋のいいトコを紹介しているトコ。

船橋市内での取材はボクも行くトコよ~♪