Ich habe eine Frage zu Best Practices für die Aufnahme 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 Produktionsversion der Website das Bootstrap-Skript und die CSS-Dateien in den node_modules
Ordner aufnehmen? Ist es sinnvoll, Bootstrap in diesem Ordner zu belassen und Folgendes 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, wenn gulp den lokalen Bootstrap vollständig aus meiner HTML-Datei entfernt und durch die CDN-Version ersetzt?
Antworten:
Normalerweise möchten Sie keinen Ihrer internen Pfade für die Struktur Ihres Servers nach außen offenlegen. Sie können
/scripts
auf Ihrem Server eine statische Route erstellen, die die Dateien aus dem Verzeichnis abruft, in dem sie sich gerade befinden. Wenn sich Ihre Dateien also befinden"./node_modules/bootstrap/dist/"
. Dann sieht das Skript-Tag auf Ihren Seiten einfach so aus:Wenn Sie Express mit NodeJS verwendet haben, ist eine statische Route so einfach:
Dann werden alle Browseranfragen von
/scripts/xxx.js
automatisch aus Ihremdist
Verzeichnis unter abgerufen__dirname + /node_modules/bootstrap/dist/xxx.js
.Hinweis: Neuere Versionen von NPM stellen mehr Dinge auf die oberste Ebene, 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 die Dateien physisch auf dem Server - Laufwerk befinden, und Sie machen eine
app.use()
mitexpress.static()
einem pseudo-Pfad zu diesen Dateien zu machen , damit Sie nicht die tatsächliche Server - Dateisystem - Organisation an den Kunden auszusetzen sind.Wenn Sie keine statische Route wie diese erstellen möchten, ist es wahrscheinlich besser, die öffentlichen Skripte einfach in einen Pfad zu kopieren, den Ihr Webserver als
/scripts
oder welche Top-Level-Bezeichnung Sie verwenden möchten. Normalerweise können Sie dieses Kopieren zu einem Teil Ihres Erstellungs- / Bereitstellungsprozesses machen.Wenn Sie nur eine bestimmte Datei in einem Verzeichnis veröffentlichen möchten und nicht alles, was in diesem Verzeichnis enthalten ist, können Sie manuell einzelne Routen für jede Datei erstellen, anstatt Folgendes zu verwenden
express.static()
:Und der Code, um eine Route dafür zu erstellen
Wenn Sie dennoch Routen für Skripte mit abgrenzen möchten
/scripts
, können Sie Folgendes tun:Und der Code, um eine Route dafür zu erstellen
quelle
/scripts
da auf diese Weise alle Abhängigkeiten innerhalb des Moduls erhalten bleiben.express.static()
sendet die erste gefundene Übereinstimmung. Da jedeexpress.static()
Anweisung nur einen möglichen übereinstimmenden Pfad erstellt, sollten keine Duplikate von einerexpress.static()
Anweisung vorhanden sein. Wenn Sie mehrereexpress.static()
Anweisungen haben, von denen jede eine Übereinstimmung haben könnte, ist die erste in Ihrem Code diejenige, deren Übereinstimmung verwendet wird. Außerdem sollten Sie nicht mehrere Dateien mit demselben Namen und demselben relativen Pfad haben, die durchexpress.static()
Anweisungen erreichbar sind . Best Practice ist, das nicht zu tun.express.static()
auf ein Verzeichnis verweisen , das NUR öffentliche Dateien enthält (einschließlich Unterverzeichnisse). Ich kann mir also kein Projekt vorstellen, in dem vieledist
Verzeichnisse veröffentlicht wurden. Das kommt mir sehr ungewöhnlich vor. Vielleicht möchten Sie eine bestimmte Route zu einer bestimmten Datei oder zu 2-3 Dateien erstellen. In diesem Fall sind Sie dafür verantwortlich, diese Dateien eindeutig zu definieren. Es wird dirscript.js
sowieso nichts nützen, vier Dateien zu haben./script.js
vom Browser angefordert wird. Die abstrakte Antwort lautet also, dass Sie nicht zulassen sollten, dass doppelte Dateinamen vorhanden sind, da dies kein lösbares Problem ist, es sei denn, Sie benötigen ein eindeutiges Präfix für jedes Dateiverzeichnis. Dann sind doppelte Stammnamen sowieso kein Problem. Für eine genauere Antwort mit einer detaillierten Empfehlung müssten Sie Ihre eigene Frage mit genauen Details posten.Ich würde das Pfad-npm-Modul verwenden und dann so etwas tun:
quelle
Wie von jfriend00 erwähnt, sollten Sie Ihre Serverstruktur nicht offenlegen. Sie könnten Ihre Projektabhängigkeitsdateien in so etwas wie kopieren
public/scripts
. Mit dep-linker geht das ganz einfach :quelle
src
werden dann so etwas wie sein/scripts/[package-name]/dist/file.min.js
.Wenn Sie eine schnelle und einfache Lösung wünschen (und Sie haben gulp installiert).
In meinem
gulpfile.js
Programm führe ich eine einfache Aufgabe zum Kopieren und Einfügen aus, mit der alle benötigten Dateien in ein./public/modules/
Verzeichnis gestellt werden.Der Nachteil dabei ist, dass es nicht automatisiert ist. Wenn Sie jedoch nur ein paar Skripte und Stile benötigen, die kopiert (und in einer Liste gespeichert) wurden, sollte dies die Aufgabe erfüllen.
quelle
'scripts': {'install':'yarn gulp copy-modules'}
, vorausgesetzt, Garn ist der Paketmanager und gulp ist im Paket installiert.Das Verzeichnis 'node_modules' befindet sich möglicherweise nicht im aktuellen Verzeichnis, daher sollten Sie den Pfad dynamisch auflösen.
quelle
Ich möchte diese Frage mit einer einfacheren Lösung aktualisieren. Erstellen Sie eine symbolische Verknüpfung zu node_modules.
Der einfachste Weg, öffentlichen Zugriff auf node_modules zu gewähren, besteht darin, einen symbolischen Link zu erstellen, der aus Ihrem öffentlichen Verzeichnis auf Ihre node_modules verweist. Der Symlink macht es so, als ob die Dateien überall dort existieren, wo der Link erstellt wird.
Zum Beispiel, wenn der Knotenserver über Code zum Bereitstellen statischer Dateien verfügt
und __dirname bezieht sich 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. Erstellen Sie dann einen solchen Symlink unter mac / linux:
oder so unter Windows:
Jetzt eine Anfrage bekommen für:
erhält eine Antwort mit der Datei unter
Das ist wirklich die Datei bei
Wenn Ihr Verzeichnis unter / path / to / app / dist kein sicherer Speicherort ist, möglicherweise aufgrund einer Störung durch einen Erstellungsprozess mit gulp oder grunt, können Sie ein separates Verzeichnis für den Link hinzufügen und einen neuen ServeStatic-Aufruf hinzufügen, z.
und im Knoten hinzufügen:
quelle
Ich habe keine sauberen Lösungen gefunden (ich möchte nicht die Quelle aller meiner node_modules offenlegen), also habe ich einfach ein Powershell-Skript geschrieben, um sie zu kopieren:
quelle
Ich habe die folgenden Änderungen an AUTO-INCLUDE der Dateien im Index-HTML vorgenommen. Wenn Sie eine Datei in den Ordner einfügen, wird diese automatisch aus dem Ordner übernommen, ohne dass Sie die Datei in index.html aufnehmen müssen
quelle
Folgendes habe ich auf meinem
express
Server eingerichtet:Viel Glück...
quelle