Bootstrap & Pakket

De offisjele hantlieding foar hoe't jo Bootstrap's CSS en JavaScript kinne opnimme en bondele yn jo projekt mei Parcel.

Op dizze side

Wolle jo nei it ein oerslaan? Download de boarnekoade en wurkdemo foar dizze hantlieding fan it twbs/foarbylden repository . Jo kinne it foarbyld ek iepenje yn StackBlitz , mar it net útfiere, om't Parcel dêr op it stuit net wurdt stipe.

Opsette

Wy bouwe in Parcel-projekt mei Bootstrap fanôf it begjin, dus d'r binne wat betingsten en stappen foarôf foardat wy echt kinne begjinne. Dizze gids fereasket dat jo Node.js ynstalleare hawwe en wat bekendheid mei de terminal.

Meitsje in projektmap en set npm yn. Wy sille de my-projectmap oanmeitsje en npm inisjalisearje mei it -yargumint om foar te kommen dat it ús alle ynteraktive fragen stelt.
```
mkdir my-project && cd my-project
npm init -y
```
Pakket ynstallearje. Oars as ús Webpack-gids, is d'r hjir mar ien ôfhinklikens fan ien build-ark. Parcel sil automatysk taaltransformators (lykas Sass) ynstallearje as it se detektearret. Wy brûke --save-devom te sinjalearjen dat dizze ôfhinklikens allinich is foar ûntwikkelingsgebrûk en net foar produksje.
```
npm i --save-dev parcel
```
Ynstallearje Bootstrap. No kinne wy Bootstrap ynstallearje. Wy sille Popper ek ynstallearje, om't ús dropdowns, popovers en tooltips derfan ôfhingje foar har posysje. As jo net fan plan binne dizze komponinten te brûken, kinne jo Popper hjir weglitte.
```
npm i --save bootstrap @popperjs/core
```

No't wy alle nedige ôfhinklikens ynstalleare hawwe, kinne wy oan it wurk gean om de projektbestannen te meitsjen en Bootstrap te ymportearjen.

Projektstruktuer

Wy hawwe de my-projectmap al oanmakke en npm inisjalisearre. No sille wy ek ús srcmap, stylblêd en JavaScript-bestân oanmeitsje om de projektstruktuer ôf te foljen. Rinne de folgjende út my-project, of meitsje de map- en bestânstruktuer manuell oan dy't hjirûnder werjûn wurdt.

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

As jo klear binne, moat jo folsleine projekt der sa útsjen:

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

Op dit punt is alles op it goede plak, mar Parcel hat in HTML-side en npm-skript nedich om ús server te begjinnen.

Pakket konfigurearje

Mei ôfhinklikens ynstalleare en ús projektmap klear foar ús om te begjinnen mei kodearring, kinne wy no Parcel konfigurearje en ús projekt lokaal útfiere. Pakket sels fereasket gjin konfiguraasjetriem troch ûntwerp, mar wy hawwe in npm-skript en in HTML-bestân nedich om ús tsjinner te begjinnen.

Folje de src/index.htmltriem yn. Pakket hat in side nedich om te werjaan, dus wy brûke ús index.htmlside om wat basis HTML yn te stellen, ynklusyf ús CSS- en JavaScript-bestannen.

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

Wy befetsje hjir in bytsje Bootstrap-styling mei de div class="container"en <button>sadat wy sjogge wannear't Bootstrap's CSS wurdt laden troch Webpack.

Parcel sil automatysk ûntdekke dat wy Sass brûke en de Sass Parcel-plugin ynstallearje om it te stypjen. As jo lykwols wolle, kinne jo ek manuell útfiere npm i --save-dev @parcel/transformer-sass.

Foegje de Parcel npm-skripts ta. Iepenje de package.jsonen heakje it folgjende startskript ta oan it scriptsobjekt. Wy sille dit skript brûke om ús Parcel-ûntwikkelingstsjinner te begjinnen en it HTML-bestân dat wy hawwe makke nei't it is kompilearre yn 'e distmap wer te jaan.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
En as lêste kinne wy Parcel begjinne. Ut de my-projectmap yn jo terminal, rinne dat nij tafoege npm-skript:
```
npm start
```

Yn 'e folgjende en lêste seksje nei dizze hantlieding sille wy alle CSS en JavaScript fan Bootstrap ymportearje.

Ymportearje Bootstrap

It ymportearjen fan Bootstrap yn Parcel fereasket twa ymporten, ien yn ús styles.scssen ien yn ús main.js.

Ymportearje Bootstrap's CSS. Foegje it folgjende ta src/scss/styles.scssoan om alle boarne Sass fan Bootstrap te ymportearjen.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Jo kinne ús stylblêden ek yndividueel ymportearje as jo wolle. Lês ús Sass ymportdokuminten foar details.
Ymportearje Bootstrap's JS. Foegje it folgjende ta src/js/main.jsom alle Bootstrap's JS te ymportearjen. Popper sil automatysk wurde ymportearre fia Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Jo kinne JavaScript-plugins ek yndividueel ymportearje as nedich om bondelgrutte te hâlden:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lês ús JavaScript-dokuminten foar mear ynformaasje oer hoe't jo de plugins fan Bootstrap kinne brûke.
En do bist klear! 🎉 Mei Bootstrap's boarne Sass en JS folslein laden, soe jo lokale ûntwikkelingsserver no der sa útsjen moatte.

No kinne jo begjinne mei it tafoegjen fan alle Bootstrap-komponinten dy't jo wolle brûke. Wês wis dat jo it folsleine Parcel-foarbyldprojekt kontrolearje foar hoe't jo ekstra oanpaste Sass opnimme en jo build optimalisearje troch allinich de dielen fan Bootstrap's CSS en JS te ymportearjen dy't jo nedich binne.

Sjoch hjir wat ferkeard of ferâldere? Iepenje asjebleaft in probleem op GitHub . Help nedich by it oplossen fan problemen? Sykje of begjin in diskusje op GitHub.