Ich habe eine Frage zu den besten Praktiken für die Einbindung von node_modules
in eine HTML-Website.
Stellen Sie sich vor, ich habe Bootstrap in meinem Ordner "node_modules". Wie würde ich nun in der Produktionsversion der Website die Bootstrap-Skript- und CSS-Dateien einbinden, die sich im Ordner "node_modules" 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 wäre es am besten, wenn ich gulp irgendwie das lokale Bootstrap komplett aus meiner HTML-Datei entfernen und durch die CDN-Version ersetzen lasse?
Normalerweise möchten Sie keinen Ihrer internen Pfade, wie Ihr Server strukturiert ist, der Außenwelt preisgeben. Sie können jedoch eine statische Route /scripts
in Ihrem Server einrichten, die die Dateien aus dem Verzeichnis holt, in dem sie sich gerade befinden. Wenn Ihre Dateien also in "./node_modules/bootstrap/dist/"
liegen. Dann sieht das Skript-Tag in Ihren Seiten einfach so aus:
<script src="/scripts/bootstrap.min.js"></script>
Wenn Sie express mit nodejs verwenden, ist eine statische Route so einfach wie diese:
app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));
Dann werden alle Browseranfragen von /scripts/xxx.js
automatisch von Ihrem dist
Verzeichnis unter __dirname + /node_modules/bootstrap/dist/xxx.js
geholt.
Hinweis: Neuere Versionen von NPM legen mehr Dinge auf der obersten Ebene ab und sind nicht so tief verschachtelt. Wenn Sie also eine neuere Version von NPM verwenden, werden die Pfadnamen anders lauten als in der Frage des Auftraggebers und in der aktuellen Antwort angegeben. Das Konzept ist aber immer noch dasselbe. Man findet heraus, wo sich die Dateien physisch auf der Festplatte des Servers befinden und erstellt eine app.use()
mit express.static()
, um einen Pseudopfad zu diesen Dateien zu erstellen, so dass man dem Client nicht die tatsächliche Organisation des Server-Dateisystems preisgibt.
Wenn Sie keine statische Route wie diese erstellen wollen, dann sind Sie wahrscheinlich besser dran, wenn Sie die öffentlichen Skripte einfach in einen Pfad kopieren, den Ihr Webserver als /scripts
oder eine beliebige Top-Level-Bezeichnung behandelt, die Sie verwenden wollen. Normalerweise können Sie dieses Kopieren zu einem Teil Ihres Build/Deployment-Prozesses machen.
Wenn Sie nur eine bestimmte Datei in einem Verzeichnis öffentlich machen wollen und nicht alles, was sich in diesem Verzeichnis befindet, dann können Sie manuell individuelle Routen für jede Datei erstellen, anstatt express.static()
zu verwenden:
<script src="/bootstrap.min.js"></script>
Und der Code zum Erstellen einer Route für diese Datei
app.get('/bootstrap.min.js', function(req, res) {
res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});
Oder, wenn Sie weiterhin Routen für Skripte mit /scripts
abgrenzen wollen, könnten Sie dies tun:
<script src="/scripts/bootstrap.min.js"></script>
Und der Code zum Erstellen einer Route für das
app.get('/scripts/bootstrap.min.js', function(req, res) {
res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});
Ich würde das npm-Modul path verwenden und dann etwas wie folgt tun:
var path = require('path');
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));
Das Verzeichnis 'node_modules' befindet sich möglicherweise nicht im aktuellen Verzeichnis, so dass Sie den Pfad dynamisch auflösen sollten.
var bootstrap_dir = require.resolve('bootstrap')
.match(/.*\/node_modules\/[^/]+\//)[0];
app.use('/scripts', express.static(bootstrap_dir + 'dist/'));