Bootstrap & Paket

Den officiella guiden för hur du inkluderar och paketerar Bootstraps CSS och JavaScript i ditt projekt med hjälp av Parcel.

På den här sidan

Vill du hoppa till slutet? Ladda ner källkoden och fungerande demo för den här guiden från twbs/exempelförrådet . Du kan också öppna exemplet i StackBlitz men inte köra det eftersom Parcel för närvarande inte stöds där.

Uppstart

Vi bygger ett paketprojekt med Bootstrap från grunden, så det finns några förutsättningar och steg i förväg innan vi kan komma igång på riktigt. Den här guiden kräver att du har Node.js installerat och att du känner till terminalen.

Skapa en projektmapp och ställ in npm. Vi skapar my-projectmappen och initierar npm med -yargumentet för att undvika att det ställer oss alla interaktiva frågor.
```
mkdir my-project && cd my-project
npm init -y
```
Installera paket. Till skillnad från vår Webpack-guide finns det bara ett enda byggverktygsberoende här. Parcel kommer automatiskt att installera språktransformatorer (som Sass) när det upptäcker dem. Vi använder --save-devför att signalera att detta beroende endast är för utvecklingsanvändning och inte för produktion.
```
npm i --save-dev parcel
```
Installera Bootstrap. Nu kan vi installera Bootstrap. Vi kommer också att installera Popper eftersom våra rullgardinsmenyer, popovers och verktygstips är beroende av den för deras placering. Om du inte planerar att använda dessa komponenter kan du utelämna Popper här.
```
npm i --save bootstrap @popperjs/core
```

Nu när vi har alla nödvändiga beroenden installerade kan vi börja arbeta med att skapa projektfilerna och importera Bootstrap.

Projektets struktur

Vi har redan skapat my-projectmappen och initierat npm. Nu kommer vi också att skapa vår srcmapp, stilmall och JavaScript-fil för att avrunda projektstrukturen. Kör följande från my-project, eller skapa manuellt mapp- och filstrukturen som visas nedan.

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

När du är klar bör ditt kompletta projekt se ut så här:

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

Vid det här laget är allt på rätt plats, men Parcel behöver en HTML-sida och npm-skript för att starta vår server.

Konfigurera paket

Med beroenden installerade och vår projektmapp redo för oss att börja koda, kan vi nu konfigurera Parcel och köra vårt projekt lokalt. Paketet i sig kräver ingen konfigurationsfil genom design, men vi behöver ett npm-skript och en HTML-fil för att starta vår server.

Fyll i src/index.htmlfilen. Paket behöver en sida för att rendera, så vi använder vår index.htmlsida för att ställa in lite grundläggande HTML, inklusive våra CSS- och JavaScript-filer.

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

Vi inkluderar lite Bootstrap-styling här med div class="container"och <button>så att vi ser när Bootstraps CSS laddas av Webpack.

Parcel kommer automatiskt att upptäcka att vi använder Sass och installera Sass Parcel-plugin för att stödja det. Men om du vill kan du också köra manuellt npm i --save-dev @parcel/transformer-sass.

Lägg till Parcel npm-skripten. Öppna package.jsonoch lägg till följande startskript till scriptsobjektet. Vi kommer att använda det här skriptet för att starta vår paketutvecklingsserver och rendera HTML-filen som vi skapade efter att den har kompilerats i distkatalogen.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Och äntligen kan vi starta Parcel. Kör det nyligen tillagda npm-skriptet från my-projectmappen i din terminal:
```
npm start
```

I nästa och sista avsnitt i den här guiden kommer vi att importera alla Bootstraps CSS och JavaScript.

Importera Bootstrap

Att importera Bootstrap till Parcel kräver två importer, en till vår styles.scssoch en till vår main.js.

Importera Bootstraps CSS. Lägg till följande för src/scss/styles.scssatt importera alla Bootstraps käll Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Du kan även importera våra stilmallar individuellt om du vill. Läs våra Sass-importdokument för detaljer.
Importera Bootstraps JS. Lägg till följande för src/js/main.jsatt importera alla Bootstraps JS. Popper kommer att importeras automatiskt via Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Du kan också importera JavaScript-plugins individuellt efter behov för att hålla nere paketstorlekar:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Läs våra JavaScript-dokument för mer information om hur du använder Bootstraps plugins.
Och du är klar! 🎉 Med Bootstraps källkod Sass och JS fulladdat bör din lokala utvecklingsserver nu se ut så här.

Nu kan du börja lägga till alla Bootstrap-komponenter du vill använda. Se till att kolla in det kompletta Parcel-exempelprojektet för att inkludera ytterligare anpassade Sass och optimera din build genom att endast importera de delar av Bootstraps CSS och JS som du behöver.

Ser du något fel eller inaktuellt här? Öppna ett problem på GitHub . Behöver du hjälp med felsökning? Sök eller starta en diskussion på GitHub.