Zum Hauptinhalt springen Zur Dokumentennavigation springen
in English

Werkzeuge bauen

Erfahren Sie, wie Sie die enthaltenen npm-Skripte von Bootstrap verwenden, um unsere Dokumentation zu erstellen, Quellcode zu kompilieren, Tests auszuführen und vieles mehr.

Auf dieser Seite

Werkzeugaufbau

Bootstrap verwendet npm-Skripte für sein Build-System. Unsere package.json enthält praktische Methoden zum Arbeiten mit dem Framework, einschließlich Kompilieren von Code, Ausführen von Tests und mehr.

Um unser Build-System zu verwenden und unsere Dokumentation lokal auszuführen, benötigen Sie eine Kopie der Quelldateien von Bootstrap und Node. Befolgen Sie diese Schritte und Sie sollten bereit sein zu rocken:

  1. Laden Sie Node.js herunter und installieren Sie es, mit dem wir unsere Abhängigkeiten verwalten.
  2. Laden Sie entweder die Quellen von Bootstrap herunter oder verzweigen Sie das Repository von Bootstrap .
  3. Navigieren Sie zum Stammverzeichnis /bootstrapund führen Sie es aus, um unsere in package.jsonnpm install aufgelisteten lokalen Abhängigkeiten zu installieren .

Wenn Sie fertig sind, können Sie die verschiedenen bereitgestellten Befehle über die Befehlszeile ausführen.

Verwenden von npm-Skripten

Unsere package.json enthält zahlreiche Aufgaben zur Entwicklung des Projekts. Ausführen npm run, um alle npm-Skripte in Ihrem Terminal anzuzeigen. Zu den Hauptaufgaben gehören:

Aufgabe Beschreibung
npm start Kompiliert CSS und JavaScript, erstellt die Dokumentation und startet einen lokalen Server.
npm run dist Erstellt das dist/Verzeichnis mit kompilierten Dateien. Benötigt Sass , Autoprefixer und terser .
npm test Führt nach dem Ausführen Tests lokal ausnpm run dist
npm run docs-serve Erstellt die Dokumentation lokal und führt sie aus.
Starten Sie mit Bootstrap via npm mit unserem Starter-Projekt! Gehen Sie zum Vorlagen-Repository twbs/bootstrap-npm-starter , um zu erfahren , wie Sie Bootstrap in Ihrem eigenen npm-Projekt erstellen und anpassen können. Enthält Sass-Compiler, Autoprefixer, Stylelint, PurgeCSS und Bootstrap-Icons.

Sass

Bootstrap verwendet Dart Sass zum Kompilieren unserer Sass-Quelldateien in CSS-Dateien (in unserem Build-Prozess enthalten), und wir empfehlen Ihnen, dasselbe zu tun, wenn Sie Sass mit Ihrer eigenen Asset-Pipeline kompilieren. Wir haben zuvor Node Sass für Bootstrap v4 verwendet, aber LibSass und darauf aufbauende Pakete, einschließlich Node Sass, sind jetzt veraltet .

Dart Sass verwendet eine Rundungsgenauigkeit von 10 und lässt aus Effizienzgründen keine Anpassung dieses Werts zu. Wir verringern diese Genauigkeit nicht während der weiteren Verarbeitung unseres generierten CSS, z. B. während der Minimierung, aber wenn Sie sich dafür entscheiden, empfehlen wir, eine Genauigkeit von mindestens 6 beizubehalten, um Probleme mit der Browserrundung zu vermeiden.

Autoprefixer

Bootstrap verwendet Autoprefixer (in unserem Build-Prozess enthalten), um einigen CSS-Eigenschaften zur Build-Zeit automatisch Herstellerpräfixe hinzuzufügen. Auf diese Weise sparen wir Zeit und Code, da wir wichtige Teile unseres CSS einmal schreiben können, während wir die Notwendigkeit von Anbieter-Mixins wie denen in v3 eliminieren.

Wir pflegen die Liste der durch Autoprefixer unterstützten Browser in einer separaten Datei in unserem GitHub-Repository. Siehe .browserslistrc für Details.

RTLCSS

Bootstrap verwendet RTLCSS , um kompiliertes CSS zu verarbeiten und in RTL umzuwandeln – im Grunde ersetzt es horizontale richtungsbewusste Eigenschaften (z. B. padding-left) durch ihr Gegenteil. Es erlaubt uns, unser CSS nur einmal zu schreiben und kleinere Änderungen mit RTLCSS -Steuerungs- und Wertdirektiven vorzunehmen .

Lokale Dokumentation

Die lokale Ausführung unserer Dokumentation erfordert die Verwendung von Hugo, das über das npm-Paket hugo-bin installiert wird. Hugo ist ein blitzschneller und ziemlich erweiterbarer statischer Site-Generator, der uns Folgendes bietet: grundlegende Includes, Markdown-basierte Dateien, Vorlagen und mehr. So fangen Sie an:

  1. Führen Sie das obige Tooling-Setup durch , um alle Abhängigkeiten zu installieren.
  2. /bootstrapFühren Sie im Stammverzeichnis npm run docs-servedie Befehlszeile aus.
  3. Öffnen http://localhost:9001/Sie in Ihrem Browser und voilà.

Erfahren Sie mehr über die Verwendung von Hugo, indem Sie dessen Dokumentation lesen .

Fehlerbehebung

Sollten beim Installieren von Abhängigkeiten Probleme auftreten, deinstallieren Sie alle vorherigen Abhängigkeitsversionen (global und lokal). Führen Sie dann erneut aus npm install.