node_modulesフォルダの中にあるスクリプトをインクルードするには？

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バージョンに置き換えるようにするのがベストでしょうか？

Buldo
編集された質問 25日 10月 2019 в 3:51
プログラミング
node.js node-modules twitter-bootstrap npm
13日 12月 2014 в 10:12
29 ビュー
質問へのコメント (2)
ソリューション

通常、サーバーの構造に関する内部経路を外部に公開したくはないでしょう。 しかし、/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');
});
jfriend00
編集した答え 8日 12月 2018 в 5:20
解説 (27)

パスのnpmモジュールを使って、次のようなことをします。

var path = require('path');
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));
Victorio Berra
編集した答え 19日 6月 2015 в 6:56
解説 (3)

jfriend00で述べたように、サーバー構造を公開しないでください。 プロジェクト依存関係ファイルを「公開/スクリプト」のようなものにコピーできます。 これは、次のようにdep-linkerで非常に簡単に**実行できます。

var DepLinker = require('dep-linker');
DepLinker.copyDependenciesTo('./public/scripts')
// Done
解説 (1)

ディレクトリ 'node_modules' がカレントディレクトリにない可能性があるので、動的にパスを解決する必要があります。

var bootstrap_dir = require.resolve('bootstrap')
                           .match(/.*\/node_modules\/[^/]+\//)[0];
app.use('/scripts', express.static(bootstrap_dir + 'dist/'));
Jake
編集した答え 18日 3月 2016 в 7:51
解説 (1)

すばやく簡単なソリューションが必要な場合(および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']);

これの欠点は、自動化されていないことです。 ただし、必要なものがコピーされた(そしてリストに保存された)いくつかのスクリプトとスタイルだけの場合は、これでうまくいくはずです。

解説 (1)

より簡単な解決策でこの質問を更新したいと思います。 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')));
curtwphillips
編集した答え 12日 6月 2016 в 8:47
解説 (2)

きれいな解決策は見つかりませんでした(すべてのnode_modulesのソースを公開したくありません)ので、それらをコピーするためにPowershellスクリプトを書きました。

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

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

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


   <script src=""></script>
解説 (0)

これが「エクスプレス」サーバーでセットアップしたものです。

// 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}`)));
});
< hr />。 




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

幸運を。..

解説 (0)