【Node.js/Express】npm installしたモジュールをクライアントに静的ファイルとして読みこませる

はじめに

Node.js/Expressで開発していると、npmを利用してモジュールをインストールすることがあります。
そのインストールしたモジュールをクライアント側でも利用する方法を、メモ代わりに記しておきます。

環境

• Node.js v8.11.3

• Express 4.16.0

• Express-generatorを用いてスケルトンを作成

構成

myapp
├─app.js
├─node_modules
│  └─jquery
│    └─dist
│        └jquery.js
├─public
├─routes
└─views

やり方

今回はjQueryを利用して説明します。

まず下記の記述をサーバー側のapp.jsに追加します。

app.use("/jquery", express.static(__dirname + "/node_modules/jquery/dist/"));

その後、クライアント側のHTMLファイルに下記の記述を追加してください。

<script src="/jquery/jquery.js"></script>

以上です。

これだけで、クライアント側からサーバー側のモジュールを利用できます。
とても簡単ですね。

何をしているのか

「/jqueryにアクセスがあった場合、(app.jsのカレントディレクトリ)/node_modules/jquery/dist/を見てね！」
という意味になります。

つまり今回の例の/jquery/jquery.jsの場合、/node_modules/jquery/dist/jquery.jsにルーティングされています。

また、

app.use(express.static(__dirname));

と書いてやることで

<script src="node_modules/jquery/dist/jquery.js"></script>

と記述すれば、同様にjquery.jsを読みこむことができます。

(可能ではあるものの、app.jsのカレントディレクトリが静的ディレクトリのマウントパスとして登録されるので、やめたほうがいい気がしますね。)

さいごに

「jQueryとかBootstrapはCDNを利用して読みこめばいいんですよ。」と習ったのですが、いつの間にやらnpm installを利用するのがずいぶんと一般的になっているようです。jQueryでは一番最初にnpmを利用したダウンロード方法が紹介されています。

もっとイケてる方法があるぜ！という場合はコメントいただけますと幸いです。