Bootstrap & Vite

Virallinen opas Bootstrapin CSS:n ja JavaScriptin sisällyttämiseen ja yhdistämiseen projektiisi Viten 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ä live-muokkausta varten.

Perustaa

Rakennamme Vite-projektia Bootstrapilla tyhjästä, joten meillä on joitain edellytyksiä ja etuvaiheita 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 Vite. Toisin kuin Webpack-oppaassamme, tässä on vain yksi rakennustyökaluriippuvuus. Käytämme --save-devviestiä, että tämä riippuvuus on vain kehityskäyttöön eikä tuotantoon.
```
npm i --save-dev vite
```
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
```
Asenna lisäriippuvuus. Viten ja Bootstrapin lisäksi tarvitsemme toisen riippuvuuden (Sass), jotta voimme tuoda ja niputtaa Bootstrapin CSS:n oikein.
```
npm i --save-dev sass
```

Nyt kun kaikki tarvittavat riippuvuudet on asennettu ja 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 vite.config.js

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
└── vite.config.js

Tässä vaiheessa kaikki on kohdallaan, mutta Vite ei toimi, koska emme ole vielä täyttäneet vite.config.js.

Määritä Vite

Kun riippuvuudet on asennettu ja projektikansiomme on valmis aloittamaan koodauksen, voimme nyt määrittää Viten ja suorittaa projektimme paikallisesti.

Avaa vite.config.jseditorissasi. Koska se on tyhjä, meidän on lisättävä siihen joitakin yleiskuvausasetuksia, jotta voimme käynnistää palvelimemme. Tämä osa konfiguraatiosta kertoo Viten etsivän projektimme JavaScriptiä ja kuinka kehityspalvelimen pitäisi käyttäytyä (poimimaan srckansiosta hot reloadilla).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

Seuraavaksi täytämme src/index.html. Tämä on HTML-sivu, jonka Vite lataa selaimeen käyttääkseen niputettua CSS:ää ja JS:ää, jonka lisäämme siihen myöhemmissä vaiheissa.

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

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

Nyt tarvitsemme npm-skriptin Viten suorittamiseen. Avaa package.jsonja lisää startalla näkyvä skripti (sinulla pitäisi jo olla testiskripti). Käytämme tätä komentosarjaa paikallisen Vite dev -palvelimen käynnistämiseen.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ja vihdoin voimme aloittaa Viten. 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

Määritä Bootstrapin Sass-tuonti kohteessa vite.config.js. Määritystiedostosi on nyt valmis ja sen pitäisi vastata alla olevaa katkelmaa. Ainoa uusi osa tässä on resolveosio – käytämme tätä aliaksen lisäämiseen sisäisiin lähdetiedostoihimme node_modules, jotta tuonti pysyy mahdollisimman yksinkertaisena.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
Tuodaan nyt 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 .
Seuraavaksi lataamme CSS:n ja tuomme Bootstrapin JavaScriptin. Lisää seuraava src/js/main.jskohtaan ladataksesi CSS ja tuodaksesi kaikki Bootstrapin JS-tiedostot. Popper tuodaan automaattisesti Bootstrapin kautta.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 Vite-esimerkkiprojekti , kuinka voit sisällyttää mukautettuja Sassia ja optimoida koontiversiosi tuomalla vain tarvitsemasi osat Bootstrapin CSS:stä ja JS:stä.

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