Frage 1:
Was genau ist der Zweck der Installation von Twitter Bootstrap über npm? Ich dachte, npm sei für serverseitige Module gedacht. Ist es schneller, die Bootstrap-Dateien selbst bereitzustellen, als ein CDN zu verwenden?
Frage 2:
Wenn ich Bootstrap mit npm installieren würde, wie würde ich auf die Dateien bootstrap.js und bootstrap.css verweisen?
Antworten:
Der Sinn der Verwendung von CDN besteht darin, dass es schneller ist, zum einen, weil es sich um ein verteiltes Netzwerk handelt, zum anderen, weil die statischen Dateien von den Browsern zwischengespeichert werden und die Wahrscheinlichkeit hoch ist, dass beispielsweise die CDN-
jquery
Bibliothek Ihre Site ist Verwendungen wurden bereits vom Browser des Benutzers heruntergeladen, und daher wurde die Datei zwischengespeichert, und daher findet kein unnötiger Download statt. Trotzdem ist es immer noch eine gute Idee , einen Fallback bereitzustellen .Nun zum Punkt des npm-Pakets von bootstrap
ist, dass es die Javascript- Datei von Bootstrap als Modul bereitstellt . Wie oben erwähnt, ermöglicht dies die
require
Verwendung von browserify , was der wahrscheinlichste Anwendungsfall und nach meinem Verständnis der Hauptgrund für die Veröffentlichung von Bootstrap auf npm ist.Wie man es benutzt
Stellen Sie sich folgende Projektstruktur vor:
In Ihrem können
index.html
Sie beidecss
undjs
Dateien wie folgt referenzieren :Welches ist der einfachste Weg und korrekt für die
.css
Dateien. Es ist jedoch viel besser, diebootstrap.js
Datei wie diese irgendwo in Ihrepublic/js/*.js
Dateien aufzunehmen:Und Sie fügen diesen Code nur in die
javascript
Dateien ein, in denen Sie ihn tatsächlich benötigenbootstrap.js
. Browserify kümmert sich darum, diese Datei für Sie einzuschließen .Der Nachteil ist nun, dass Sie jetzt Ihre Front-End-Dateien als
node_modules
Abhängigkeiten haben und dernode_modules
Ordner normalerweise nicht mit eingecheckt istgit
. Ich denke, dies ist der umstrittenste Teil mit vielen Meinungen und Lösungen .UPDATE März 2017
Fast zwei Jahre sind vergangen, seit ich diese Antwort geschrieben habe und ein Update vorhanden ist.
Die allgemein akzeptierte Methode besteht nun darin, einen Bundler wie das Webpack (oder einen anderen Bundler Ihrer Wahl) zu verwenden, um alle Ihre Assets in einem Build-Schritt zu bündeln.
Erstens können Sie die CommonJS-Syntax genau wie browserify verwenden. Um Bootstrap-JS-Code in Ihr Projekt aufzunehmen, gehen Sie wie folgt vor:
Was die
css
Dateien betrifft, hat Webpack sogenannte " Loader ". Sie ermöglichen es Ihnen, dies in Ihren js-Code zu schreiben:und die CSS-Dateien werden "magisch" in Ihren Build aufgenommen. Sie werden dynamisch als
<style />
Tags hinzugefügt, wenn Ihre App ausgeführt wird. Sie können das Webpack jedoch so konfigurieren, dass sie als separatecss
Datei exportiert werden. Weitere Informationen hierzu finden Sie in der Dokumentation zum Webpack.Abschließend.
node_modules
noch die dynamisch erstellten Dateien an git übergeben. Sie könnenbuild
npm ein Skript hinzufügen , das zum Bereitstellen von Dateien auf dem Server verwendet werden soll. Dies kann jedoch auf verschiedene Arten erfolgen, abhängig von Ihrem bevorzugten Erstellungsprozess.quelle
defer
Attribut in Ihren Skripten oder Lazy Load-Dateien verwendenWenn Sie diese Module NPM-fähig machen, können Sie sie mithilfe der statischen Umleitung bereitstellen.
Installieren Sie zuerst die Pakete:
Dann auf der server.js:
Dann endlich bei der .html:
Ich würde Seiten nicht direkt aus dem Ordner bereitstellen, in dem sich Ihre Datei server.js befindet (was normalerweise mit node_modules identisch ist), wie von timetowonder vorgeschlagen. Auf diese Weise können Benutzer auf Ihre Datei server.js zugreifen.
Natürlich können Sie einfach Ihren Ordner herunterladen und kopieren und einfügen, aber mit NPM können Sie ihn bei Bedarf einfach aktualisieren ... einfacher, denke ich.
quelle
/js
Route in zwei separate Verzeichnisse umgeleitet werden? Wie würde es mit widersprüchlichen Dateien in jedem umgehen?Antwort 1:
Durch das Herunterladen von Bootstrap über npm (oder bower) können Sie eine gewisse Latenzzeit gewinnen. Anstatt eine Remote-Ressource zu erhalten, erhalten Sie eine lokale Ressource. Dies ist schneller, es sei denn, Sie verwenden eine CDN (siehe Antwort unten).
"npm" sollte ursprünglich Node Module bekommen, aber mit dem Essort der Javascript-Sprache (und dem Aufkommen von browserify) ist es ein bisschen erwachsen geworden. Sie können AngularJS sogar auf npm herunterladen, das ist kein serverseitiges Framework. Mit Browserify können Sie AMD / RequireJS / CommonJS auf der Clientseite verwenden, sodass Knotenmodule auf der Clientseite verwendet werden können.
Antwort 2:
Wenn Sie Bootstrap npm installieren (wenn Sie keine bestimmte Grunz- oder Schluckdatei verwenden, um in einen dist-Ordner zu wechseln), befindet sich Ihr Bootstrap in "./node_modules/bootstrap/bootstrap.min.css", wenn ich mich nicht irre.
quelle
Verwenden Sie npm / bower, um Bootstrap zu installieren, wenn Sie es neu kompilieren / weniger Dateien ändern / testen möchten. Mit Grunzen wäre dies einfacher, wie unter http://getbootstrap.com/getting-started/#grunt gezeigt . Wenn Sie nur vorkompilierte Bibliotheken hinzufügen möchten, können Sie Dateien manuell in das Projekt aufnehmen.
Nein, Sie müssen dies selbst tun oder ein separates Grunzwerkzeug verwenden. Zum Beispiel 'grunt-contrib-concat' So verketten und minimieren Sie mehrere CSS- und JavaScript-Dateien mit Grunt.js (0.3.x)
quelle