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.

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:

Laden Sie Node.js herunter und installieren Sie es, mit dem wir unsere Abhängigkeiten verwalten.
Laden Sie entweder die Quellen von Bootstrap herunter oder verzweigen Sie das Repository von Bootstrap .
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 die folgenden Befehle und Aufgaben:

Aufgabe	Beschreibung
`npm run dist`	`npm run dist`erstellt das `/dist/`Verzeichnis mit kompilierten Dateien. Verwendet Sass , Autoprefixer und terser .
`npm test`	Führt nach dem Ausführen Tests lokal aus`npm run dist`
`npm run docs-serve`	Erstellt die Dokumentation lokal und führt sie aus.

Ausführen npm run, um alle npm-Skripte anzuzeigen.

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 v4 verwendet Node Sass zum Kompilieren unserer Sass-Quelldateien in CSS-Dateien (in unserem Build-Prozess enthalten). Um beim Kompilieren von Sass mit Ihrer eigenen Asset-Pipeline dasselbe generierte CSS zu erhalten, müssen Sie einen Sass-Compiler verwenden, der mindestens die Funktionen von Node Sass unterstützt. Dies ist wichtig zu beachten, da LibSass und darauf aufbauende Pakete – einschließlich Node Sass – seit dem 26. Oktober 2020 veraltet sind .

Wenn Sie neuere Sass-Funktionen oder Kompatibilität mit neueren CSS-Standards benötigen, ist Dart Sass jetzt die primäre Implementierung von Sass und unterstützt eine JavaScript-API, die vollständig mit Node Sass kompatibel ist (mit einigen Ausnahmen, die auf der GitHub-Seite von Dart Sass aufgeführt sind ).

Wir erhöhen die Sass-Rundungspräzision auf 6 (standardmäßig ist sie 5 in Node Sass), um Probleme mit der Browser-Rundung zu vermeiden. Wenn Sie Dart Sass verwenden, müssen Sie dies nicht anpassen, da dieser Compiler eine Rundungsgenauigkeit von 10 verwendet und aus Effizienzgründen keine Anpassung zulässt.

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.

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:

Führen Sie das obige Tooling-Setup durch , um alle Abhängigkeiten zu installieren.
/bootstrapFühren Sie im Stammverzeichnis npm run docs-servedie Befehlszeile aus.
Ö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.