node_modulesフォルダー内にあるスクリプトを含める方法は？

node_modulesHTML Webサイトに組み込むためのベストプラクティスについて質問があります。

node_modulesフォルダー内にBootstrapがあるとします。Webサイトの製品版では、node_modulesフォルダー内にあるBootstrapスクリプトとCSSファイルをどのように含めるのですか？Bootstrapをそのフォルダー内に残して、次のようなことをするのは理にかなっていますか？

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

または、私のgulpファイルにルールを追加して、それらのファイルをdistフォルダーにコピーする必要がありますか？それとも、どうにかしてHTMLファイルからローカルブートストラップを完全に削除してCDNバージョンに置き換えるのが最善でしょうか。

通常、サーバーがどのように構造化されているかについての内部パスを外部に公開したくありません。できることは/scripts、サーバーに静的ルートを作成して、ファイルが存在するディレクトリからファイルをフェッチすることです。つまり、ファイルがにある場合です"./node_modules/bootstrap/dist/"。次に、ページのスクリプトタグは次のようになります。

<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()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');
});

私はパスnpmモジュールを使用し、次のようなことをします：

var path = require('path');
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));

重要： path.joinを使用して、システムに依存しない方法でパスを結合します。つまり、WindowsとUNIXでは、異なるパス区切り文字（/および）を使用します

jfriend00で述べたように、サーバー構造を公開しないでください。プロジェクトの依存関係ファイルをなどにコピーできますpublic/scripts。これは、次のような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'は現在のディレクトリにない可能性があるため、動的にパスを解決する必要があります。

var bootstrap_dir = require.resolve('bootstrap')
                           .match(/.*\/node_modules\/[^/]+\//)[0];
app.use('/scripts', express.static(bootstrap_dir + 'dist/'));

この質問をより簡単な解決策で更新したいと思います。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

またはWindowsでこれのように：

mklink /path/to/app/node_modules /path/to/app/dist/node_modules

今の取得要求：

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')));

クリーンなソリューションが見つからなかった（すべてのnode_modulesのソースを公開したくない）ので、それらをコピーするPowershellスクリプトを作成しました。

$deps = "leaflet", "leaflet-search", "material-components-web"

foreach ($dep in $deps) {
    Copy-Item "node_modules/$dep/dist" "static/$dep" -Recurse
}

以下の変更を行って、インデックス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>
<% } %>

これは私のexpressサーバーで設定したものです：

// 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>

幸運を...