Narzędzia do budowania
Dowiedz się, jak używać skryptów npm dołączonych do usługi Bootstrap, aby tworzyć naszą dokumentację, kompilować kod źródłowy, uruchamiać testy i nie tylko.
Konfiguracja oprzyrządowania
Bootstrap używa skryptów npm dla swojego systemu kompilacji. Nasz package.json zawiera wygodne metody pracy z frameworkiem, w tym kompilowanie kodu, uruchamianie testów i wiele innych.
Aby korzystać z naszego systemu kompilacji i uruchamiać naszą dokumentację lokalnie, będziesz potrzebować kopii plików źródłowych Bootstrap i węzła. Wykonaj następujące kroki i powinieneś być gotowy do rocka:
- Pobierz i zainstaluj Node.js , którego używamy do zarządzania naszymi zależnościami.
- Pobierz źródła Bootstrap lub rozwidnij repozytorium Bootstrap .
- Przejdź do
/bootstrap
katalogu głównego i uruchom,npm install
aby zainstalować nasze lokalne zależności wymienione w package.json .
Po zakończeniu będziesz mógł uruchamiać różne polecenia dostarczone z wiersza poleceń.
Korzystanie ze skryptów npm
Nasz plik package.json zawiera następujące polecenia i zadania:
Zadanie | Opis |
---|---|
npm run dist |
npm run dist tworzy /dist/ katalog ze skompilowanymi plikami. Wykorzystuje Sass , Autoprefixer i zwięzły . |
npm test |
Uruchamia testy lokalnie po uruchomieniunpm run dist |
npm run docs-serve |
Buduje i uruchamia dokumentację lokalnie. |
Uruchom npm run
, aby zobaczyć wszystkie skrypty npm.
Sass
Bootstrap v4 używa Node Sass do kompilacji naszych plików źródłowych Sass do plików CSS (zawartych w naszym procesie budowania). Aby uzyskać ten sam wygenerowany CSS podczas kompilowania Sass przy użyciu własnego potoku zasobów, musisz użyć kompilatora Sass, który obsługuje przynajmniej te funkcje, które posiada Node Sass. Należy o tym pamiętać, ponieważ od 26 października 2020 r. LibSass i oparte na nim pakiety — w tym Node Sass — są przestarzałe .
Jeśli potrzebujesz nowszych funkcji Sass lub zgodności z nowszymi standardami CSS, Dart Sass jest teraz podstawową implementacją Sass i obsługuje interfejs API JavaScript, który jest w pełni zgodny z Node Sass (z kilkoma wyjątkami wymienionymi na stronie GitHub Darta Sassa ).
Zwiększamy precyzję zaokrąglania Sass do 6 (domyślnie jest to 5 w Node Sass), aby zapobiec problemom z zaokrąglaniem przeglądarki. Jeśli użyjesz Dart Sass, nie będzie to coś, co musisz dostosować, ponieważ ten kompilator używa precyzji zaokrąglania 10 i ze względu na wydajność nie pozwala na dostosowanie.
Autoprefiks
Bootstrap używa Autoprefixera (zawartego w naszym procesie budowania) do automatycznego dodawania prefiksów dostawców do niektórych właściwości CSS w czasie budowania. Dzięki temu oszczędzamy czas i kod, pozwalając nam napisać kluczowe części naszego CSS za jednym razem, jednocześnie eliminując potrzebę dodawania dodatków dostawców, takich jak te, które można znaleźć w v3.
Utrzymujemy listę przeglądarek obsługiwanych przez Autoprefixer w osobnym pliku w naszym repozytorium GitHub. Zobacz .browserslistrc po szczegóły.
Dokumentacja lokalna
Uruchomienie naszej dokumentacji lokalnie wymaga użycia Hugo, który jest instalowany za pomocą pakietu hugo-bin npm. Hugo to niesamowicie szybki i dość rozszerzalny generator stron statycznych, który zapewnia nam: podstawowe dołączenia, pliki oparte na Markdown, szablony i wiele więcej. Oto jak zacząć:
- Uruchom powyższą konfigurację narzędzi, aby zainstalować wszystkie zależności.
- Z
/bootstrap
katalogu głównego uruchomnpm run docs-serve
w wierszu poleceń. - Otwórz
http://localhost:9001/
w przeglądarce i gotowe.
Dowiedz się więcej o korzystaniu z Hugo, czytając jego dokumentację .
Rozwiązywanie problemów
W przypadku problemów z instalacją zależności odinstaluj wszystkie poprzednie wersje zależności (globalne i lokalne). Następnie uruchom ponownie npm install
.