Bootstrap & pakket

De officiële gids voor het opnemen en bundelen van Bootstrap's CSS en JavaScript in uw project met behulp van Parcel.

Op deze pagina

Wil je naar het einde springen? Download de broncode en werkende demo voor deze handleiding uit de twbs/examples-repository . Je kunt het voorbeeld ook openen in StackBlitz, maar niet uitvoeren omdat Parcel daar momenteel niet wordt ondersteund.

Opstelling

We bouwen vanaf het begin een Parcel-project met Bootstrap, dus er zijn enkele voorwaarden en stappen vooraf voordat we echt aan de slag kunnen. Deze handleiding vereist dat u Node.js hebt geïnstalleerd en enige bekendheid met de terminal.

Maak een projectmap en stel npm in. We zullen de my-projectmap maken en npm initialiseren met het -yargument om te voorkomen dat het ons alle interactieve vragen stelt.
```
mkdir my-project && cd my-project
npm init -y
```
Pakket installeren. In tegenstelling tot onze Webpack-gids, is er hier slechts één afhankelijkheid van een build-tool. Parcel zal automatisch taaltransformatoren (zoals Sass) installeren zodra het ze detecteert. We gebruiken --save-devom aan te geven dat deze afhankelijkheid alleen voor ontwikkelingsgebruik is en niet voor productie.
```
npm i --save-dev parcel
```
Installeer Bootstrap. Nu kunnen we Bootstrap installeren. We zullen Popper ook installeren omdat onze dropdowns, popovers en tooltips ervan afhankelijk zijn voor hun positionering. Als u niet van plan bent deze componenten te gebruiken, kunt u Popper hier weglaten.
```
npm i --save bootstrap @popperjs/core
```

Nu we alle benodigde afhankelijkheden hebben geïnstalleerd, kunnen we aan de slag met het maken van de projectbestanden en het importeren van Bootstrap.

Projectstructuur

We hebben de my-projectmap al gemaakt en npm geïnitialiseerd. Nu zullen we ook onze srcmap, stylesheet en JavaScript-bestand maken om de projectstructuur af te ronden. Voer het volgende uit vanaf my-project, of maak handmatig de onderstaande map en bestandsstructuur aan.

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

Als u klaar bent, ziet uw volledige project er als volgt uit:

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

Op dit moment staat alles op de juiste plaats, maar Parcel heeft een HTML-pagina en npm-script nodig om onze server te starten.

Pakket configureren

Met geïnstalleerde afhankelijkheden en onze projectmap klaar om te beginnen met coderen, kunnen we nu Parcel configureren en ons project lokaal uitvoeren. Parcel zelf vereist geen configuratiebestand, maar we hebben wel een npm-script en een HTML-bestand nodig om onze server te starten.

Vul het src/index.htmlbestand in. Parcel heeft een pagina nodig om weer te geven, dus we gebruiken onze index.htmlpagina om wat basis-HTML in te stellen, inclusief onze CSS- en JavaScript-bestanden.
```
<!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>
```
We voegen hier een klein beetje Bootstrap-styling toe met de div class="container"en <button>zodat we kunnen zien wanneer Bootstrap's CSS wordt geladen door Webpack.

Parcel detecteert automatisch dat we Sass gebruiken en installeert de Sass Parcel-plug- in om dit te ondersteunen. Als u wilt, kunt u echter ook handmatig uitvoeren npm i --save-dev @parcel/transformer-sass.
Voeg de Parcel npm-scripts toe. Open de package.jsonen voeg het volgende startscript toe aan het scriptsobject. We gebruiken dit script om onze Parcel-ontwikkelserver te starten en het HTML-bestand dat we hebben gemaakt weer te geven nadat het in de distmap is gecompileerd.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
En tot slot kunnen we Parcel starten. Voer vanuit de my-projectmap in uw terminal dat nieuw toegevoegde npm-script uit:
```
npm start
```

In het volgende en laatste deel van deze handleiding importeren we alle CSS en JavaScript van Bootstrap.

Bootstrap importeren

Het importeren van Bootstrap in Parcel vereist twee invoer, één in onze styles.scssen één in onze main.js.

Importeer de CSS van Bootstrap. Voeg het volgende toe aan src/scss/styles.scssom alle Sass-bronnen van Bootstrap te importeren.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
U kunt onze stylesheets ook afzonderlijk importeren als u dat wilt. Lees onze Sass-importdocumenten voor meer informatie.
Importeer de JS van Bootstrap. Voeg het volgende toe aan src/js/main.jsom alle JS van Bootstrap te importeren. Popper wordt automatisch geïmporteerd via Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
U kunt indien nodig ook afzonderlijk JavaScript-plug-ins importeren om de bundelgroottes laag te houden:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lees onze JavaScript-documenten voor meer informatie over het gebruik van de plug-ins van Bootstrap.
En je bent klaar! 🎉 Met de bron Sass en JS van Bootstrap volledig geladen, zou uw lokale ontwikkelingsserver er nu zo uit moeten zien.

Nu kunt u beginnen met het toevoegen van alle Bootstrap-componenten die u wilt gebruiken. Zorg ervoor dat u het volledige voorbeeldproject van Parcel bekijkt om te zien hoe u extra aangepaste Sass kunt opnemen en hoe u uw build kunt optimaliseren door alleen de delen van Bootstrap's CSS en JS te importeren die u nodig hebt.

Zie je hier iets mis of verouderd? Open een probleem op GitHub . Hulp nodig bij het oplossen van problemen? Zoek of start een discussie op GitHub.