Bootstrap & Vite

A hivatalos útmutató a Bootstrap CSS- és JavaScript-kódjainak a Vite használatával történő projektjébe való felvételéhez és kötegeléséhez.

Ezen az oldalon

A végére szeretne ugrani? Töltse le az útmutató forráskódját és működő bemutatóját a twbs/examples tárból . A példát a StackBlitzben is megnyithatja élő szerkesztéshez.

Beállít

Egy Vite projektet építünk a Bootstrap segítségével a semmiből, így van néhány előfeltétel és első lépés, mielőtt igazán elkezdhetnénk. Ez az útmutató megköveteli, hogy telepítse a Node.js fájlt, és ismerje a terminált.

Hozzon létre egy projektmappát, és állítsa be az npm-et. Létrehozzuk a my-projectmappát, és inicializáljuk az npm-et az -yargumentummal, hogy elkerüljük, hogy minden interaktív kérdést tegyen fel nekünk.
```
mkdir my-project && cd my-project
npm init -y
```
Telepítse a Vite-ot. A Webpack útmutatóval ellentétben itt csak egyetlen összeállítási eszközfüggőség van. Azt szoktuk --save-devjelezni, hogy ez a függőség csak fejlesztési célokra szolgál, nem pedig gyártásra.
```
npm i --save-dev vite
```
Telepítse a Bootstrap programot. Most telepíthetjük a Bootstrap-et. A Poppert is telepíteni fogjuk, mivel a legördülő menük, felugró ablakaink és eszköztippjeink attól függnek, hogy elhelyezkedjenek. Ha nem tervezi ezeket az összetevőket használni, itt elhagyhatja a Poppert.
```
npm i --save bootstrap @popperjs/core
```
Telepítsen további függőséget. A Vite és a Bootstrap mellett egy másik függőségre (Sass) is szükségünk van a Bootstrap CSS megfelelő importálásához és kötegeléséhez.
```
npm i --save-dev sass
```

Most, hogy az összes szükséges függőséget telepítettük és beállítottuk, hozzáláthatunk a projektfájlok létrehozásához és a Bootstrap importálásához.

Projekt felépítése

Már létrehoztuk a my-projectmappát és inicializáltuk az npm-et. Most létrehozzuk a srcmappát, a stíluslapot és a JavaScript fájlt is, hogy kerekítsük a projekt szerkezetét. Futtassa a következőt a webhelyről my-project, vagy hozza létre manuálisan az alább látható mappa- és fájlstruktúrát.

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

Ha elkészült, a teljes projektnek így kell kinéznie:

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

Ezen a ponton minden a megfelelő helyen van, de a Vite nem fog működni, mert még nem töltöttük ki vite.config.js.

A Vite beállítása

Miután a függőségek telepítve vannak, és projektmappánk készen áll a kódolás megkezdésére, most már konfigurálhatjuk a Vite-t, és helyileg futtathatjuk projektünket.

Nyissa vite.config.jsmeg a szerkesztőben. Mivel üres, hozzá kell adnunk néhány boilerplate konfigurációt, hogy elindíthassuk a szerverünket. A konfiguráció ezen része azt mondja a Vite-nek, hogy meg kell keresnie a projektünk JavaScript-jét, és azt, hogy a fejlesztői kiszolgáló hogyan viselkedjen (a srcmappából a hot újratöltéssel).
```
const path = require('path')

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

Ezután kitöltjük src/index.html. Ez az a HTML-oldal, amelyet a Vite betölt a böngészőbe, hogy felhasználja a csomagban található CSS-t és JS-t, amelyet később adunk hozzá.

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

Itt egy kis Bootstrap stílust adunk hozzá a div class="container"és <button>-hoz, hogy lássuk, mikor tölti be a Bootstrap CSS-jét a Vite.

Most szükségünk van egy npm szkriptre a Vite futtatásához. Nyissa meg package.jsonés adja hozzá az startalább látható szkriptet (a tesztszkriptnek már rendelkeznie kell). Ezt a szkriptet használjuk a helyi Vite fejlesztői kiszolgáló elindításához.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
És végül elindíthatjuk a Vite-t. A my-projectterminál mappájából futtassa az újonnan hozzáadott npm szkriptet:
```
npm start
```

Az útmutató következő és utolsó részében a Bootstrap összes CSS-jét és JavaScriptjét importáljuk.

Bootstrap importálása

Állítsa be a Bootstrap Sass importálását itt vite.config.js. A konfigurációs fájl elkészült, és meg kell egyeznie az alábbi kódrészlettel. Az egyetlen új rész itt a resolveszakasz – ezt használjuk arra, hogy álnevet adjunk a forrásfájljainkhoz node_modules, hogy az importálás a lehető legegyszerűbb legyen.
```
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
  }
}
```
Most importáljuk a Bootstrap CSS-jét. Adja hozzá a következőt src/scss/styles.scssa Bootstrap Sass összes forráskódjának importálásához.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ha akarja, stíluslapjainkat egyenként is importálhatja. A részletekért olvassa el a Sass importálási dokumentumait .
Ezután betöltjük a CSS-t, és importáljuk a Bootstrap JavaScriptjét. src/js/main.jsA CSS betöltéséhez és a Bootstrap összes JS-jének importálásához adja hozzá a következőket . A Popper automatikusan importálásra kerül a Bootstrapen keresztül.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
A JavaScript-bővítményeket szükség szerint egyenként is importálhatja, hogy csökkentse a csomagméreteket:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Olvassa el JavaScript-dokumentumunkat , ha többet szeretne megtudni a Bootstrap beépülő moduljainak használatáról.
És kész! 🎉 Ha a Bootstrap Sass és JS forráskódja teljesen be van töltve, a helyi fejlesztőszervernek így kell kinéznie.

Most megkezdheti a használni kívánt Bootstrap összetevők hozzáadását. Feltétlenül nézze meg a teljes Vite példaprojektet , hogy hogyan foglalhat bele további egyéni Sass-okat, és hogyan optimalizálhatja a buildet a Bootstrap CSS-jének és JS-jének csak a szükséges részei importálásával.

Látsz itt valami rosszat vagy elavultat? Nyissa meg a problémát a GitHubon . Segítségre van szüksége a hibaelhárításhoz? Keressen vagy indítson beszélgetést a GitHubon.