HTML ウェブサイトに node_modules
を含める際のベストプラクティスについて質問があります。
node_modulesフォルダの中にBootstrapがあると想像してください。さて、ウェブサイトの本番バージョンでは、
node_modules`フォルダの中にあるBootstrapのスクリプトとCSSファイルをどのように含めるのでしょうか?Bootstrapをフォルダに入れたまま、次のようなことをするのは意味があるのでしょうか?
<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>
それとも、gulpファイルにルールを追加して、それらのファイルをdistフォルダにコピーしなければならないのでしょうか?あるいは、gulpが私のHTMLファイルからローカルのbootstrapを完全に削除し、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'の質問と現在の回答で示されたものとは異なるものになるでしょう。しかし、コンセプトは同じです。 サーバーのドライブにあるファイルの物理的な位置を調べ、express.static()
で app.use()
を作成し、これらのファイルへの擬似パスを作成することで、実際のサーバーのファイルシステム構成をクライアントに公開しないようにします。
このような静的なルートを作りたくない場合は、公開スクリプトをウェブサーバーが /scripts
などのトップレベルの指定として扱うパスにコピーするのがよいでしょう。 通常、このコピーはビルド/デプロイメントプロセスの一部として行うことができます。
もし、あるディレクトリにある特定のファイルだけを公開し、そのディレクトリにあるすべてのファイルを一緒に公開したくない場合は、次のような 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');
});
パスのnpmモジュールを使って、次のようなことをします。
var path = require('path');
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));
jfriend00で述べたように、サーバー構造を公開しないでください。 プロジェクト依存関係ファイルを「公開/スクリプト」のようなものにコピーできます。 これは、次のようにdep-linkerで非常に簡単に**実行できます。
var DepLinker = require('dep-linker');
DepLinker.copyDependenciesTo('./public/scripts')
// Done
すばやく簡単なソリューションが必要な場合(およびgulpがインストールされている場合)。
gulpfile.js
で、必要なファイルを に入れる単純なコピーペーストタスクを実行します。/ public / modules /
ディレクトリ。
gulp.task('modules', function() {
sources = [
'./node_modules/prismjs/prism.js',
'./node_modules/prismjs/themes/prism-dark.css',
]
gulp.src( sources ).pipe(gulp.dest('./public/modules/'));
});
gulp.task('copy-modules', ['modules']);
これの欠点は、自動化されていないことです。 ただし、必要なものがコピーされた(そしてリストに保存された)いくつかのスクリプトとスタイルだけの場合は、これでうまくいくはずです。
より簡単な解決策でこの質問を更新したいと思います。 node_modulesへのシンボリックリンクを作成します。
node_modulesへのパブリックアクセスを許可する最も簡単な方法は、パブリックディレクトリ内からnode_modulesを指すシンボリックリンクを作成することです。 symlinkは、リンクが作成される場所にファイルが存在するかのようにします。
たとえば、ノードサーバーに静的ファイルを提供するためのコードがある場合。
app.use(serveStatic(path.join(__dirname, 'dist')));
__dirnameは/ path / to / appを指し、静的ファイルが/ path / to / app / distから提供されます。
node_modulesは/ path / to / app / node_modulesにあり、mac / linuxでこのようなシンボリックリンクを作成します。
ln -s /path/to/app/node_modules /path/to/app/dist/node_modules
または窓でこのように:
mklink /path/to/app/node_modules /path/to/app/dist/node_modules
今のget request:
node_modules/some/path
ファイルで応答を受け取ります。
/path/to/app/dist/node_modules/some/path
これは本当にファイルです。
/path/to/app/node_modules/some/path
/ path / to / app / distのディレクトリが安全な場所ではない場合、おそらくgulpまたはgruntを使用したビルドプロセスからの干渉のため、リンクに別のディレクトリを追加し、次のような新しいserveStatic呼び出しを追加できます。 。
ln -s /path/to/app/node_modules /path/to/app/newDirectoryName/node_modules
ノードで追加:
app.use(serveStatic(path.join(__dirname, 'newDirectoryName')));
以下の変更を行って、インデックスhtmlのファイルをAUTO-INCLUDEに変更しました。 そのため、フォルダにファイルを追加すると、index.htmlにファイルを含める必要なく、フォルダから自動的に取得されます。
//// THIS WORKS FOR ME
///// in app.js or server.js
var app = express();
app.use("/", express.static(__dirname));
var fs = require("fs"),
function getFiles (dir, files_){
files_ = files_ || [];
var files = fs.readdirSync(dir);
for (var i in files){
var name = dir + '/' + files[i];
if (fs.statSync(name).isDirectory()){
getFiles(name, files_);
} else {
files_.push(name);
}
}
return files_;
}
//// send the files in js folder as variable/array
ejs = require('ejs');
res.render('index', {
'something':'something'...........
jsfiles: jsfiles,
});
///--------------------------------------------------
///////// in views/index.ejs --- the below code will list the files in index.ejs
<% for(var i=0; i < jsfiles.length; i++) { %>
<script src="<%= jsfiles[i] %>"></script>
<% } %>
これが「エクスプレス」サーバーでセットアップしたものです。
// app.js
const path = require('path');
const express = require('express');
const expressApp = express();
const nm_dependencies = ['bootstrap', 'jquery', 'popper.js']; // keep adding required node_modules to this array.
nm_dependencies.forEach(dep => {
expressApp.use(`/${dep}`, express.static(path.resolve(`node_modules/${dep}`)));
});
<!-- somewhere inside head tag -->
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" />
<!-- somewhere near ending body tag -->
<script src="jquery/dist/jquery.js" charset="utf-8"></script>
<script src="popper.js/dist/popper.js" charset="utf-8"></script>
<script src="bootstrap/dist/js/bootstrap.js" charset="utf-8"></script>
幸運を。..