node_modulesHTML ウェブサイトに組み込むためのベストプラクティスに関して質問があります。
フォルダー内に Bootstrap があるとしますnode_modules。Web サイトの製品版では、node_modulesフォルダー内にある Bootstrap スクリプトと CSS ファイルをどのように含めればよいでしょうか。Bootstrap をそのフォルダー内に残して、次のような操作を行うのは理にかなっていますか。
<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>
それとも、gulp ファイルにルールを追加して、それらのファイルを dist フォルダーにコピーする必要がありますか? それとも、gulp で何らかの方法で HTML ファイルからローカル ブートストラップを完全に削除し、CDN バージョンに置き換えるのが最善でしょうか?
ベストアンサー1
通常、サーバーの構造を示す内部パスを外部に公開することは望ましくありません。/scriptsサーバーに静的ルートを作成し、ファイルが保存されているディレクトリからファイルを取得することができます。つまり、ファイルが にある場合"./node_modules/bootstrap/dist/"、ページ内のスクリプト タグは次のようになります。
<script src="/scripts/bootstrap.min.js"></script>
Express を nodejs で使用していた場合、静的ルートは次のように簡単です。
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()withを作成しますexpress.static()。これにより、実際のサーバー ファイル システムの構成がクライアントに公開されることはありません。
このような静的ルートを作成したくない場合は、パブリック スクリプトを Web サーバーが扱うパス、/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');
});