Zweck der Installation von Twitter Bootstrap über npm?

233

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?

James Fazio
quelle
9
Der Hauptanwendungsfall, den ich mir vorstellen kann, ist die Verwendung von Browserify für Ihre Frontend-JS-Entwicklung.
Cvrebert
1
@cvrebert: danke für die tl; dr Antwort :)
Ivan Durst

Antworten:

143
  1. 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- jqueryBibliothek 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 requireVerwendung von browserify , was der wahrscheinlichste Anwendungsfall und nach meinem Verständnis der Hauptgrund für die Veröffentlichung von Bootstrap auf npm ist.

  2. Wie man es benutzt

    Stellen Sie sich folgende Projektstruktur vor:

    Projekt
    | - Knotenmodule
    | - öffentlich
    | | - css
    | | - img
    | | - js
    | | - index.html
    | - package.json
    
    

In Ihrem können index.htmlSie beide cssund jsDateien wie folgt referenzieren :

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Welches ist der einfachste Weg und korrekt für die .cssDateien. Es ist jedoch viel besser, die bootstrap.jsDatei wie diese irgendwo in Ihre public/js/*.jsDateien aufzunehmen:

var bootstrap = require('bootstrap');

Und Sie fügen diesen Code nur in die javascriptDateien ein, in denen Sie ihn tatsächlich benötigen bootstrap.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_modulesAbhängigkeiten haben und der node_modulesOrdner normalerweise nicht mit eingecheckt ist git. 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:

const bootstrap = require('bootstrap');

Was die cssDateien betrifft, hat Webpack sogenannte " Loader ". Sie ermöglichen es Ihnen, dies in Ihren js-Code zu schreiben:

require('bootstrap/dist/css/bootstrap.css');

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 separate cssDatei exportiert werden. Weitere Informationen hierzu finden Sie in der Dokumentation zum Webpack.

Abschließend.

  1. Sie sollten Ihren App-Code mit einem Bundler "bündeln"
  2. Sie sollten weder node_modulesnoch die dynamisch erstellten Dateien an git übergeben. Sie können buildnpm 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.
Zeitüberschreitung
quelle
1
Ich habe das gerade getan, aber immer wieder localhost: 3000 / bootstrap 404 (nicht gefunden), irgendwelche Gedanken dazu?
Emerak
Ich würde sagen, dass "die Chancen hoch sind, dass beispielsweise die von Ihrer Site verwendete JQuery-Bibliothek des CDN bereits vom Browser des Benutzers heruntergeladen wurde", ist übertrieben
Ich muss sagen, dass die Webpack-Antwort korrekt ist. Aber um die OP-Frage zu beantworten: Es gibt keine gute Möglichkeit zu testen, ob ein Skript / Stylesheet geladen wurde. HTTP / 2 kann diese Probleme beim Multiplexen lösen. Aber zum größten Teil können Sie Webpack und das deferAttribut in Ihren Skripten oder Lazy Load-Dateien verwenden
Tamb
187

Wenn Sie diese Module NPM-fähig machen, können Sie sie mithilfe der statischen Umleitung bereitstellen.

Installieren Sie zuerst die Pakete:

npm install jquery
npm install bootstrap

Dann auf der server.js:

var express = require('express');
var app = express();

// prepare server
app.use('/api', api); // redirect API calls
app.use('/', express.static(__dirname + '/www')); // redirect root
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap

Dann endlich bei der .html:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

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.

Augusto Goncalves
quelle
2
Für diejenigen, die mit einem Express-Knotenprojekt arbeiten, das von Web Storm generiert wurde, müssen Sie den Code in Ihre app.js
kemicofa ghost
Ich habe nie vorgeschlagen, statische Front-End-Dateien zusammen mit Serverdateien zu speichern.
Zeitplan
Führen Sie diese App-Aufrufe durch, während Sie die js-Datei oder den Ready-Handler laden?
Pupeno
@Pablo, ich benutze es ganz am Anfang, genau wie im Code-Snippet.
Augusto Goncalves
1
Wie kann dieselbe /jsRoute in zwei separate Verzeichnisse umgeleitet werden? Wie würde es mit widersprüchlichen Dateien in jedem umgehen?
Jacob Ford
72

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.

mfrachet
quelle
5
Sie können einen verwenden Kopierbefehl und es über einen Aufruf npm Lauf , Grunzen Aufgabe oder schluck Aufgabe . Auf diese Weise muss ich das Verzeichnis "node_modules" nicht einfach steuern (beim Erstellen / Bereitstellen einfach "npm install" aufrufen) und kann anstelle von "./node_modules/bootstrap" auf "styles / bootstrap.min.css" verweisen /bootstrap.min.css ".
Segne Yahu
Wenn das Kopieren der Dateien einen Nachteil hat, haben Sie natürlich zwei Kopien dieser Abhängigkeiten in Ihrem Repo. Die von @augusto erwähnte statische Umleitungsmethode sieht effizienter aus.
estaples
3
  1. 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.

  2. 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)

7affer
quelle