npmで追加したjsライブラリの管理方法を知りたい

Question

概要

npm installで入れたJSのライブラリは、
node_modulesフォルダに入るが、この後どのようにして利用するのかがわからない

質問

composer installでPHPのライブラリをインストール＆管理できるように、
おそらくnpm installでJSのライブラリを取得＆管理できるかと思います。

composerで入れたPHPのライブラリは、vendorフォルダ配下に管理され、
PHPからはautoload.phpをincludeするだけで全ライブラリが利用可能になります。

では、node_modules配下に管理されているJSライブラリはどのように呼び出すのでしょうか？

以前、同様にyarnで取得したライブラリはどのように扱うのかの質問をさせていただいたときは、Laravel限定での回答を頂いたのですが、
そうではなく、汎用的な使い方をご教示いただきたいです。
LaravelだとLaravel Mixというものでコンパイル？できるそうですが、
では、CakePHPでは？Silexでは？Slim3では？レガシーコードでは？となります。

例えば、npm installで取得したjQueryを呼び出す際は、
<script src="/node_modules/jquery/jquery.min.js"></script>のような呼び出し方をするのでしょうか？
それとも、node_modules配下からコピペでpublicフォルダに移動して、呼び出すのでしょうか？

このnode_modulesの使い方がイマイチわかりません。
（大体の記事は「npm installでインストールできた～」で止まっており、その先の使い方が見つからず……）

ご存知の方がいらっしゃいましたら、ご教示いただけますと幸いです。

過去の質問

• https://teratail.com/questions/149590

Answer 1

過去の質問にもコメントしましたが、node_modulesに入れたJavaScriptは、ブラウザからは基本的にそのまま使えないと考えてください

Nodeで何かしらのビルドシステムを利用して、出来上がったJavaScriptをブラウザに読ませる形となります。

Answer 2

npm installにて追加したmoduleの使用方法として大きく２パターンあります。

1.コピーして使用する(ブラウザで実行するJavaScript)

それとも、node_modules配下からコピペでpublicフォルダに移動して、呼び出すのでしょうか？

記載のとおり、node_module配下のファイルをソース、もしくは公開ディレクトリに配置して使用します。
コピーしたディレクトリ(public)に対して<script src="/public/jquery/jquery.min.js"></script>のように記載するため、node_moduleディレクトリの記載はありません。

ブラウザで起動するJavaScriptとして使用する場合はこのような手法を取ることが多いです。（例：Jquery,bootstrapなど）

2.そのまま使用する(サーバーサイドで実行するJavaScript(node.js))

これは何かしらのフレームワークを使用した場合となります。これはブラウザとしてではなくnodeとして使用する場合に多いです。例えばnode.jsのexpressフレームワークはWEBサーバとして動かすフレームワークですが、サーバサイドJavaScriptとして実行させるためnode_moduleディレクトリ配下のファイルは移動(コピペ)しません。

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

---

まとめると

• ブラウザで実行する場合は移動(コピペ)する
• サーバーで実行する場合は移動しない

使用するフレームワークによっては例外もあるかもしれませんので参考程度に