in English

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:

  1. Pobierz i zainstaluj Node.js , którego używamy do zarządzania naszymi zależnościami.
  2. Pobierz źródła Bootstrap lub rozwidnij repozytorium Bootstrap .
  3. Przejdź do /bootstrapkatalogu głównego i uruchom, npm installaby 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 disttworzy /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.

Zacznij korzystać z Bootstrap przez npm dzięki naszemu projektowi startowemu! Przejdź do repozytorium szablonów twbs /bootstrap-npm-starter , aby zobaczyć, jak zbudować i dostosować Bootstrap we własnym projekcie npm. Zawiera kompilator Sass, Autoprefixer, Stylelint, PurgeCSS i ikony Bootstrap.

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ąć:

  1. Uruchom powyższą konfigurację narzędzi, aby zainstalować wszystkie zależności.
  2. Z /bootstrapkatalogu głównego uruchom npm run docs-servew wierszu poleceń.
  3. 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.