[解決済み】node_modules フォルダにあるスクリプトをインクルードする方法は？

質問

を含める際のベストプラクティスについて質問があります。 node_modules をHTMLのWebサイトに追加してください。

の中に Bootstrap が入っているとします。 node_modules フォルダーに格納されます。さて、製品版の Web サイトでは、Bootstrap スクリプトと CSS ファイルを node_modules フォルダーに格納されます。Bootstrapをそのフォルダの中に入れておいて、以下のようなことをするのは意味があるのでしょうか？

<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>

それとも、gulp ファイルにルールを追加して、これらのファイルを dist フォルダにコピーしなければならないのでしょうか？あるいは、gulpに、私のHTMLファイルからローカルのブートストラップを完全に削除させ、CDNバージョンに置き換えることが最善でしょうか？

解決方法は？

通常、サーバーの構造に関する内部パスは外部に公開したくありません。 しかし /scripts の静的ルートは、ファイルが存在するディレクトリからファイルを取得します。 ですから、もしあなたのファイルが "./node_modules/bootstrap/dist/" . そうすると、ページ内のscriptタグはこんな感じになるだけです。

<script src="/scripts/bootstrap.min.js"></script>

nodejsでexpressを使っていた場合、静的ルートはこのようにシンプルです。

app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));

そして、ブラウザからのリクエストは /scripts/xxx.js は、自動的にあなたの dist ディレクトリを __dirname + /node_modules/bootstrap/dist/xxx.js .

注意：新しいバージョンのNPMは、より多くのものをトップレベルに置き、それほど深くネストしないので、新しいバージョンのNPMを使用している場合、パス名はOPの質問と現在の回答で示されたものとは異なるでしょう。しかし、コンセプトは同じです。 サーバーのドライブにあるファイルの物理的な場所を見つけ、その場所に app.use() で express.static() を使用して、これらのファイルへの擬似パスを作成することで、実際のサーバーのファイルシステム構成をクライアントに公開することはありません。

このような静的なルートを作りたくない場合は、公開スクリプトをウェブサーバーが扱えるパスにコピーする方が良いでしょう。 /scripts または任意のトップレベル指定を使用することができます。 通常、このコピーはビルド/デプロイメントプロセスの一部として行うことができます。

あるディレクトリにある特定の1つのファイルだけを公開し、そのディレクトリにあるすべてのファイルを一緒に公開しないようにしたい場合は express.static() のようなものです。

<script src="/bootstrap.min.js"></script>

そして、そのためのルートを作成するためのコード

app.get('/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});

または、まだスクリプトのルートを /scripts ということで、こんなこともできます。

<script src="/scripts/bootstrap.min.js"></script>

そして、そのためのルートを作成するためのコード

app.get('/scripts/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});