Bootstrap i paczka

Oficjalny przewodnik dotyczący dołączania i łączenia CSS i JavaScript Bootstrap w projekcie za pomocą Parcel.

Na tej stronie

Chcesz przejść do końca? Pobierz kod źródłowy i działające demo tego przewodnika z repozytorium twbs/examples . Możesz również otworzyć przykład w StackBlitz, ale nie uruchamiać go, ponieważ usługa Parcel nie jest tam obecnie obsługiwana.

Organizować coś

Budujemy projekt Parcel za pomocą Bootstrap od podstaw, więc jest kilka warunków wstępnych i kroków, zanim naprawdę możemy zacząć. Ten przewodnik wymaga zainstalowania Node.js i pewnej znajomości terminala.

Utwórz folder projektu i ustaw npm. Utworzymy my-projectfolder i zainicjujemy npm z -yargumentem, aby uniknąć zadawania nam wszystkich interaktywnych pytań.
```
mkdir my-project && cd my-project
npm init -y
```
Zainstaluj działkę. W przeciwieństwie do naszego przewodnika po pakietach internetowych, istnieje tutaj tylko jedna zależność narzędzia do kompilacji. Parcel automatycznie zainstaluje transformatory językowe (takie jak Sass), gdy je wykryje. Używamy --save-dev, aby zasygnalizować, że ta zależność jest przeznaczona tylko do użytku programistycznego, a nie produkcyjnego.
```
npm i --save-dev parcel
```
Zainstaluj Bootstrap. Teraz możemy zainstalować Bootstrap. Zainstalujemy również Poppera, ponieważ nasze listy rozwijane, popovery i podpowiedzi zależą od tego w celu ich pozycjonowania. Jeśli nie planujesz używać tych komponentów, możesz pominąć tutaj Poppera.
```
npm i --save bootstrap @popperjs/core
```

Teraz, gdy mamy zainstalowane wszystkie niezbędne zależności, możemy zabrać się do pracy nad tworzeniem plików projektu i importowaniem Bootstrapa.

Struktura projektu

Stworzyliśmy już my-projectfolder i zainicjalizowaliśmy npm. Teraz utworzymy również nasz srcfolder, arkusz stylów i plik JavaScript, aby dopełnić strukturę projektu. Uruchom następujące polecenie my-projectlub ręcznie utwórz folder i strukturę plików pokazaną poniżej.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

Kiedy skończysz, Twój kompletny projekt powinien wyglądać tak:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

W tym momencie wszystko jest na swoim miejscu, ale Parcel potrzebuje strony HTML i skryptu npm do uruchomienia naszego serwera.

Konfiguruj paczkę

Mając zainstalowane zależności i nasz folder projektu gotowy do rozpoczęcia kodowania, możemy teraz skonfigurować Parcel i uruchomić nasz projekt lokalnie. Sama paczka z założenia nie wymaga pliku konfiguracyjnego, ale potrzebujemy skryptu npm i pliku HTML, aby uruchomić nasz serwer.

Wypełnij src/index.htmlplik. Parcel potrzebuje strony do renderowania, więc używamy naszej index.htmlstrony do skonfigurowania podstawowego kodu HTML, w tym naszych plików CSS i JavaScript.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>

Dołączamy tutaj trochę stylu Bootstrap z div class="container"i <button>tak, abyśmy mogli zobaczyć, kiedy CSS Bootstrap jest ładowany przez Webpack.

Parcel automatycznie wykryje, że używamy Sass i zainstaluje wtyczkę Sass Parcel , aby ją obsługiwać. Jeśli jednak chcesz, możesz również ręcznie uruchomić npm i --save-dev @parcel/transformer-sass.

Dodaj skrypty npm Parcel. Otwórz package.jsoni dodaj następujący startskrypt do scriptsobiektu. Użyjemy tego skryptu, aby uruchomić nasz serwer programistyczny Parcel i wyrenderować plik HTML, który utworzyliśmy po skompilowaniu go do distkatalogu.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
I wreszcie możemy uruchomić Paczkę. Z my-projectfolderu w terminalu uruchom nowo dodany skrypt npm:
```
npm start
```

W następnej i ostatniej sekcji tego przewodnika zaimportujemy wszystkie CSS i JavaScript Bootstrap.

Importuj Bootstrap

Importowanie Bootstrapa do Parcel wymaga dwóch importów, jednego do naszego styles.scssi jednego do naszego main.js.

Importuj CSS Bootstrapa. Dodaj poniższe do, src/scss/styles.scssaby zaimportować wszystkie źródła Sass Bootstrapa.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Możesz również importować nasze arkusze stylów indywidualnie, jeśli chcesz. Przeczytaj nasze dokumenty dotyczące importu Sass , aby uzyskać szczegółowe informacje.
Importuj plik JS Bootstrapa. Dodaj następujące elementy do, src/js/main.jsaby zaimportować wszystkie pliki JS Bootstrap. Popper zostanie zaimportowany automatycznie przez Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
W razie potrzeby możesz również importować wtyczki JavaScript pojedynczo, aby zmniejszyć rozmiary pakietów:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Przeczytaj naszą dokumentację JavaScript , aby uzyskać więcej informacji na temat korzystania z wtyczek Bootstrap.
I jesteś skończony! 🎉 Po pełnym załadowaniu źródeł Sass i JS Bootstrapa, lokalny serwer programistyczny powinien teraz wyglądać tak.

Teraz możesz zacząć dodawać dowolne komponenty Bootstrap, których chcesz użyć. Koniecznie sprawdź kompletny przykładowy projekt Parcel, aby dowiedzieć się, jak dodać dodatkowy niestandardowy Sass i zoptymalizować swoją kompilację, importując tylko te części CSS i JS Bootstrap, których potrzebujesz.

Widzisz tutaj coś złego lub nieaktualnego? Otwórz zgłoszenie w serwisie GitHub . Potrzebujesz pomocy w rozwiązywaniu problemów? Wyszukaj lub rozpocznij dyskusję na GitHub.