Bootstrap & Parcel

A hivatalos útmutató a Bootstrap CSS- és JavaScript-kódjainak a Parcel használatával történő projektjébe történő 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, de nem futtathatja, mert a Parcel jelenleg nem támogatott.

Beállít

A Bootstrap segítségével a semmiből építünk egy Parcel-projektet, í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 csomagot. A Webpack útmutatóval ellentétben itt csak egyetlen összeállítási eszközfüggőség van. A Parcel automatikusan telepíti a nyelvi transzformátorokat (például a Sass-t), amint észleli őket. 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 parcel
```
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
```

Most, hogy minden szükséges függőséget telepítettünk, 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

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

Ezen a ponton minden a megfelelő helyen van, de a Parcelnek szüksége van egy HTML oldalra és npm szkriptre a szerverünk elindításához.

Parcel konfigurálása

Mivel 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 Parcelt, és helyileg futtathatjuk projektünket. A csomag önmagában nem igényel konfigurációs fájlt, de szükségünk van egy npm szkriptre és egy HTML fájlra a szerver elindításához.

Töltse ki a src/index.htmlfájlt. A Parcelnek szüksége van egy oldalra a megjelenítéshez, ezért az index.htmloldalunkat használjuk néhány alapvető HTML beállítására, beleértve a CSS- és JavaScript-fájlokat is.
```
<!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>
```
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 Webpack.

A Parcel automatikusan észleli, hogy Sass-t használunk, és telepíti a Sass Parcel bővítményt , hogy támogassa. Azonban ha kívánja, manuálisan is futtathatja a npm i --save-dev @parcel/transformer-sass.
Adja hozzá a Parcel npm szkripteket. Nyissa meg package.jsonés adja hozzá a következő startszkriptet az scriptsobjektumhoz. Ezzel a szkripttel indítjuk el a Parcel fejlesztői szerverünket, és az általunk létrehozott HTML-fájlt a distkönyvtárba való fordítás után rendereljük.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
És végül elindíthatjuk a Parcelt. 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

A Bootstrap Parcelbe történő importálásához két importálásra van szükség, egyet a mi styles.scssés egyet a mi main.js.

Importálja 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 .
Importálja a Bootstrap JS-jét. src/js/main.jsA 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 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 Parcel példaprojektet , hogy hogyan építhet be további egyéni Sass-t, és hogyan optimalizálhatja összeállítását a Bootstrap CSS-nek és JS-nek csak azokat a részeit importálva, amelyekre szüksége van.

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.