web-dev-qa-db-ja.com

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

HTML Webサイトにnode_modulesを含めるためのベストプラクティスについて質問があります。

node_modulesフォルダの中にBootstrapがあると想像してください。 Webサイトの配布版（ライブ版）では、node_modulesフォルダー内にあるBootstrapスクリプトとCSSファイルをどのように含めますか？ Bootstrapをそのフォルダの中に置いて次のようなことをするのは意味がありますか？

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

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

node.jstwitter-bootstrapnpmnode-modules
237
phpheini

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

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

Nodejsでエクスプレスを使用していた場合、静的ルートは次のように簡単です。

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

次に、/scripts/xxx.jsからのブラウザ要求は、__dirname + /node_modules/bootstrap/dist/xxx.jsのdistディレクトリから自動的に取得されます。

注：NPMの新しいバージョンでは、ネストが深くネストされていないため、トップレベルにより多くのものが配置されるため、NPMの新しいバージョンを使用している場合、パス名はOPの質問および現在の回答で示されるものとは異なります。しかし、概念はまだ同じです。サーバードライブ上のファイルの物理的な場所を確認し、app.use()を使用して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');
});
268
jfriend00

パスnpmモジュールを使用してから、次のようにします。

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

Jfriend00で述べたように、あなたはあなたのサーバー構造を公開してはいけません。プロジェクトの依存関係ファイルをpublic/scriptsのようなものにコピーすることができます。このように 非常に簡単に を dep-linker _のようにすることができます：

var DepLinker = require('dep-linker');
DepLinker.copyDependenciesTo('./public/scripts')
// Done
8
Marcelo Lazaroni

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

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

あなたが速くて簡単な解決策を望むなら （そしてあなたは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']);

この欠点は、自動化されていないということです。しかし、あなたが必要としているのが、コピーされた（そしてリストに保存された）いくつかのスクリプトとスタイルだけであるなら、これは仕事をするべきです。

4
Jesse

私はきれいな解決策を見つけられませんでした（私のすべてのnode_modulesのソースを公開したくない）ので、それらをコピーするためのPowershellスクリプトを書きました：

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

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

この質問をもっと簡単な解決策で更新したい。 node_modulesへのシンボリックリンクを作成します。

Node_modulesへのパブリックアクセスを許可する最も簡単な方法は、パブリックディレクトリ内からnode_modulesを指すシンボリックリンクを作成することです。シンボリックリンクは、リンクが作成された場所にファイルが存在するかのようにします。

たとえば、ノードサーバに静的ファイルを提供するためのコードがある場合

app.use(serveStatic(path.join(__dirname, 'dist')));

静的ファイルが/ path/to/app/distから提供されるように、__ dirnameは/ path/to/appを参照します。

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

私は、インデックス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>
<% } %>
1
SuperNova

これが私の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>

がんばろう...

0
Akash