Bootstrap & Pack

Virallinen opas Bootstrapin CSS:n ja JavaScriptin sisällyttämiseen ja yhdistämiseen projektiisi Parcelin avulla.

Tällä sivulla

Haluatko hypätä loppuun? Lataa tämän oppaan lähdekoodi ja toimiva demo twbs/examples -varastosta . Voit myös avata esimerkin StackBlitzissä, mutta olla suorittamatta sitä, koska siellä ei tällä hetkellä tueta Parcelia.

Perustaa

Rakennamme Bootstrapin kanssa Parcel-projektia tyhjästä, joten meillä on joitain edellytyksiä ja askeleita ennen kuin voimme todella aloittaa. Tämä opas edellyttää, että sinulla on Node.js asennettuna ja terminaalin tuntemus.

Luo projektikansio ja määritä npm. Luomme my-projectkansion ja alustamme npm:n -yargumentilla, jotta se ei kysy meiltä kaikkia interaktiivisia kysymyksiä.
```
mkdir my-project && cd my-project
npm init -y
```
Asenna paketti. Toisin kuin Webpack-oppaassamme, tässä on vain yksi rakennustyökaluriippuvuus. Parcel asentaa automaattisesti kielimuuntajia (kuten Sass), kun se havaitsee ne. Käytämme --save-devviestiä, että tämä riippuvuus on vain kehityskäyttöön eikä tuotantoon.
```
npm i --save-dev parcel
```
Asenna Bootstrap. Nyt voimme asentaa Bootstrapin. Asennamme myös Popperin, koska pudotusvalikot, ponnahdusikkunamme ja työkaluvinkkimme riippuvat siitä niiden sijainnista. Jos et aio käyttää näitä komponentteja, voit jättää Popperin pois täältä.
```
npm i --save bootstrap @popperjs/core
```

Nyt kun kaikki tarvittavat riippuvuudet on asennettu, voimme aloittaa projektitiedostojen luomisen ja Bootstrapin tuomisen.

Hankkeen rakenne

Olemme jo luoneet my-projectkansion ja alustaneet npm:n. Luomme nyt myös srckansion, tyylitaulukon ja JavaScript-tiedoston täydentämään projektin rakennetta. Suorita seuraava osoitteesta my-projecttai luo manuaalisesti alla näkyvä kansio- ja tiedostorakenne.

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

Kun olet valmis, koko projektisi pitäisi näyttää tältä:

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

Tässä vaiheessa kaikki on oikeassa paikassa, mutta Parcel tarvitsee HTML-sivun ja npm-skriptin palvelimemme käynnistämiseksi.

Määritä paketti

Kun riippuvuudet on asennettu ja projektikansiomme on valmis aloittamaan koodauksen, voimme nyt määrittää Parcelin ja suorittaa projektimme paikallisesti. Itse paketti ei vaadi suunnittelutiedostoa, mutta tarvitsemme npm-skriptin ja HTML-tiedoston palvelimemme käynnistämiseksi.

Täytä src/index.htmltiedosto. Paketti tarvitsee sivun renderöidäkseen, joten käytämme index.htmlsivuamme HTML-perusasetusten määrittämiseen, mukaan lukien CSS- ja JavaScript-tiedostomme.

<!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>

Lisäämme tähän hieman Bootstrap-tyyliä div class="container"ja <button>jotta näemme, milloin Webpack lataa Bootstrapin CSS:n.

Paketti tunnistaa automaattisesti, että käytämme Sassia, ja asentaa Sass Parcel -laajennuksen tukemaan sitä. Voit kuitenkin halutessasi ajaa myös manuaalisesti npm i --save-dev @parcel/transformer-sass.

Lisää Parcel npm -skriptit. Avaa package.jsonja lisää seuraava startkomentosarja scriptsobjektiin. Käytämme tätä komentosarjaa käynnistääksemme Parcel-kehityspalvelimemme ja renderöimme luomamme HTML-tiedoston sen jälkeen, kun se on käännetty disthakemistoon.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ja lopuksi voimme aloittaa Packin. Suorita äskettäin lisätty npm-skripti terminaalisi my-projectkansiosta:
```
npm start
```

Tämän oppaan seuraavassa ja viimeisessä osiossa tuomme kaikki Bootstrapin CSS- ja JavaScript-koodit.

Tuo Bootstrap

Bootstrapin tuominen Parceliin vaatii kaksi tuontia, yhden meidän styles.scssja toisen meidän main.js.

Tuo Bootstrapin CSS. Lisää seuraava src/scss/styles.scsskohtaan tuodaksesi kaikki Bootstrapin lähdekoodit Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Voit halutessasi myös tuoda tyylisivumme yksitellen. Lue lisätietoja Sass-tuontiasiakirjoistamme .
Tuo Bootstrapin JS. Lisää seuraava src/js/main.jskohtaan tuodaksesi kaikki Bootstrapin JS-tiedostot. Popper tuodaan automaattisesti Bootstrapin kautta.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Voit myös tuoda JavaScript-laajennuksia yksitellen tarpeen mukaan pitääksesi nippukoot pienenä:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lue JavaScript-dokumenteistamme lisätietoja Bootstrapin lisäosien käytöstä.
Ja olet valmis! 🎉 Kun Bootstrapin lähde Sass ja JS on ladattu täyteen, paikallisen kehityspalvelimesi pitäisi nyt näyttää tältä.

Nyt voit aloittaa minkä tahansa Bootstrap-komponenttien lisäämisen, joita haluat käyttää. Muista tarkistaa täydellinen Parcel-esimerkkiprojekti , kuinka voit sisällyttää mukautetun Sassin ja optimoida koontiversiosi tuomalla vain tarvitsemasi Bootstrapin CSS- ja JS-osat.

Näetkö tässä jotain vialla tai vanhentunutta? Avaa ongelma GitHubissa . Tarvitsetko apua vianetsinnässä? Hae tai aloita keskustelu GitHubissa.