it-swarm.com.de

Wie binde ich Skripte in den Ordner node_modules ein?

Ich habe eine Frage zu bewährten Methoden zum Einfügen von node_modules in eine HTML-Website.

Stellen Sie sich vor, ich habe Bootstrap in meinem node_modules -Ordner. Wie würde ich nun für die Distributionsversion der Website (die Live-Version) das Bootstrap -Skript und die CSS-Dateien einfügen, die sich im node_modules -Ordner befinden? Ist es sinnvoll, Bootstrap in diesem Ordner zu belassen und etwas wie das Folgende zu tun?

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

Oder müsste ich meiner gulp-Datei Regeln hinzufügen, die diese Dateien dann in meinen dist-Ordner kopieren? Oder ist es am besten, gulp das lokale bootstrap aus meiner HTML-Datei entfernen und durch die CDN-Version ersetzen zu lassen?

246
phpheini

Normalerweise möchten Sie keinen Ihrer internen Pfade für die Struktur Ihres Servers nach außen freigeben. Sie können auf Ihrem Server eine statische /scripts -Route erstellen, die die Dateien aus dem Verzeichnis abruft, in dem sie sich gerade befinden. Befinden sich Ihre Dateien also in "./node_modules/bootstrap/dist/". Dann sieht das Skript-Tag auf Ihren Seiten so aus:

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

Wenn Sie Express mit nodejs verwenden, ist eine statische Route so einfach:

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

Anschließend werden alle Browseranforderungen von /scripts/xxx.js automatisch aus Ihrem dist -Verzeichnis unter __dirname + /node_modules/bootstrap/dist/xxx.js abgerufen.

Hinweis: In neueren Versionen von NPM werden mehr Dinge auf die oberste Ebene gestellt, nicht so tief verschachtelt. Wenn Sie also eine neuere Version von NPM verwenden, unterscheiden sich die Pfadnamen von den Angaben in der Frage des OP und in der aktuellen Antwort. Das Konzept ist jedoch immer noch dasselbe. Sie finden heraus, wo sich die Dateien physisch auf Ihrem Serverlaufwerk befinden, und Sie führen eine app.use() mit express.static() aus, um einen Pseudopfad zu diesen Dateien zu erstellen, damit Sie die tatsächliche Server-Dateisystemorganisation nicht dem Client zugänglich machen.


Wenn Sie keine statische Route wie diese erstellen möchten, ist es wahrscheinlich besser, die öffentlichen Skripte in einen Pfad zu kopieren, den Ihr Webserver als /scripts behandelt, oder wie auch immer die Bezeichnung der obersten Ebene lautet, die Sie verwenden möchten . Normalerweise können Sie dieses Kopieren zu einem Teil Ihres Build-/Bereitstellungsprozesses machen.


Wenn Sie nur eine bestimmte Datei in einem Verzeichnis öffentlich machen möchten und nicht alle darin enthaltenen Dateien, können Sie für jede Datei einzelne Routen manuell erstellen, anstatt express.static() zu verwenden, z.

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

Und der Code, um eine Route dafür zu erstellen

app.get('/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});

Wenn Sie weiterhin Routen für Skripte mit /scripts definieren möchten, können Sie dies tun:

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

Und der Code, um eine Route dafür zu erstellen

app.get('/scripts/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});
268
jfriend00

Ich würde das Pfad-Npm-Modul verwenden und dann so etwas tun:

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

Wie von jfriend00 erwähnt, sollten Sie Ihre Serverstruktur nicht offen legen. Sie könnten Ihre Projektabhängigkeitsdateien in etwas wie public/scripts kopieren. Sie können dies sehr einfach mit dep-linker so tun:

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

Das Verzeichnis 'node_modules' befindet sich möglicherweise nicht im aktuellen Verzeichnis. Sie sollten den Pfad daher dynamisch auflösen.

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

Wenn Sie eine schnelle und einfache Lösung suchen (und Sie haben gulp installiert).

In meinem gulpfile.js führe ich einen einfachen Kopier-Einfüge-Task aus, der alle benötigten Dateien in das ./public/modules/ -Verzeichnis legt.

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

Der Nachteil ist, dass es nicht automatisiert ist. Wenn Sie jedoch nur ein paar Skripte und Stile kopieren (und in einer Liste aufbewahren) müssen, sollte dies den Job erledigen.

4
Jesse

Ich habe keine sauberen Lösungen gefunden (ich möchte nicht die Quelle aller meiner node_modules offen legen), also habe ich einfach ein Powershell-Skript geschrieben, um sie zu kopieren:

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

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

Ich möchte diese Frage mit einer einfacheren Lösung aktualisieren. Erstellen Sie eine symbolische Verknüpfung zu node_modules.

Der einfachste Weg, den öffentlichen Zugriff auf node_modules zu gewähren, besteht darin, einen symbolischen Link zu Ihren node_modules in Ihrem öffentlichen Verzeichnis zu erstellen. Der Symlink macht es so, als ob die Dateien dort existieren, wo der Link erstellt wird.

Beispiel: Der Knotenserver verfügt über Code zum Bereitstellen statischer Dateien

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

und __dirname verweist auf/path/to/app, sodass Ihre statischen Dateien von/path/to/app/dist bereitgestellt werden

und node_modules befindet sich unter/path/to/app/node_modules, dann erstelle einen Symlink wie diesen unter mac/linux:

ln -s /path/to/app/node_modules /path/to/app/dist/node_modules

oder so auf Windows:

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

Jetzt eine Anfrage für:

node_modules/some/path 

erhalten eine Antwort mit der Datei an

/path/to/app/dist/node_modules/some/path 

das ist wirklich die datei bei

/path/to/app/node_modules/some/path

Wenn Ihr Verzeichnis unter/path/to/app/dist kein sicherer Speicherort ist, möglicherweise aufgrund von Störungen durch einen Erstellungsprozess mit gulp oder grunt, können Sie ein separates Verzeichnis für den Link hinzufügen und einen neuen serveStatic-Aufruf wie den folgenden hinzufügen:

ln -s /path/to/app/node_modules /path/to/app/newDirectoryName/node_modules

und im Knoten hinzufügen:

app.use(serveStatic(path.join(__dirname, 'newDirectoryName')));
3
curtwphillips

Ich habe die folgenden Änderungen vorgenommen, um die Dateien im Index-HTML-Code AUTO-INCLUDE zu setzen. Wenn Sie dem Ordner eine Datei hinzufügen, wird diese automatisch aus dem Ordner übernommen, ohne dass Sie die Datei in die index.html aufnehmen müssen

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

Das habe ich auf meinem express Server eingerichtet:

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

Viel Glück...

0
Akash