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.

Na tej stronie

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 /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 package.json zawiera wiele zadań do rozwijania projektu. Uruchom npm run, aby zobaczyć wszystkie skrypty npm w terminalu. Podstawowe zadania obejmują:

Zadanie	Opis
`npm start`	Kompiluje CSS i JavaScript, buduje dokumentację i uruchamia lokalny serwer.
`npm run dist`	Tworzy `dist/`katalog ze skompilowanymi plikami. Wymaga Sass , Autoprefixer i terser .
`npm test`	Uruchamia testy lokalnie po uruchomieniu`npm run dist`
`npm run docs-serve`	Buduje i uruchamia dokumentację lokalnie.

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 używa Dart Sass do kompilowania naszych plików źródłowych Sass do plików CSS (uwzględnionych w naszym procesie kompilacji) i zalecamy, abyś zrobił to samo, jeśli kompilujesz Sass przy użyciu własnego potoku zasobów. Poprzednio używaliśmy Node Sass dla Bootstrap v4, ale LibSass i zbudowane na nim pakiety, w tym Node Sass, są teraz przestarzałe .

Dart Sass używa precyzji zaokrąglania 10 i ze względu na wydajność nie pozwala na regulację tej wartości. Nie obniżamy tej precyzji podczas dalszego przetwarzania wygenerowanego przez nas kodu CSS, na przykład podczas minifikacji, ale jeśli zdecydujesz się to zrobić, zalecamy zachowanie precyzji co najmniej 6, aby zapobiec problemom z zaokrąglaniem przeglądarki.

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.

RTLCSS

Bootstrap używa RTLCSS do przetwarzania skompilowanych CSS i konwertowania ich na RTL – w zasadzie zastępując właściwości uwzględniające kierunek poziomy (np. padding-left) ich przeciwieństwem. Pozwala nam to napisać nasz CSS tylko raz i dokonać drobnych poprawek za pomocą dyrektyw kontroli i wartości RTLCSS .

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 /bootstrapkatalogu głównego uruchom npm run docs-servew 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.