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?

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.

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.

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.

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)