Bootstrap & Parcelle ya kokangama

Guide officiel ya ndenge ya ko kotisa pe ko bundle CSS na JavaScript ya Bootstrap na projet na yo na nzela ya Parcel.

Na lokasa oyo

Olingi kopumbwa tii na nsuka? Télécharger code source na démonstration ya mosala pona guide oyo na dépôt ya twbs/exemples . Okoki mpe kofungola ndakisa na StackBlitz kasi kosala yango te mpo Parcel ezali te na ntango oyo esungami kuna.

Kobongisa

Tozali kotonga projet ya Parcel na Bootstrap à partir ya zéro, yango wana ezali na mwa ba conditions préalables mpe na ba étapes ya liboso liboso ete tokoka mpenza kobanda. Guide oyo esengi ozala na Node.js installé pe mua familiarité na terminal.

Bosala dossier ya projet pe bo setup npm. Tokosala my-projectdossier pe toko initialiser npm na -yargument po e éviter etuna biso ba questions interactives nionso.
```
mkdir my-project && cd my-project
npm init -y
```
Botia Parcelle. Na bokeseni na buku na biso ya Webpack, ezali kaka na bozangi bondimi ya esaleli ya botongi moko awa. Parcel eko installer automatiquement ba transformateurs ya langue (lokola Sass) tango eko détecter yango. Tosalelaka --save-devpona kopesa signal que dépendance oyo ezali kaka pona usage ya développement et non pona production.
```
npm i --save-dev parcel
```
Botia na esika bakomi Bootstrap. Sikoyo tokoki ko installer Bootstrap. Toko installer pe Popper puisque ba dropdowns na biso, ba popovers, na ba outils e dépend na yango pona positionnement na bango. Soki ozali na plan te ya kosalela ba composants wana, okoki ko omiter Popper awa.
```
npm i --save bootstrap @popperjs/core
```

Sikoyo lokola tozali na ba dépendances nionso esengeli installé, tokoki kozua mosala ya kosala ba fichiers ya projet mpe ko importer Bootstrap.

Bokeli ya mosala

Tosi tosala my-projectdossier pe to initialiser npm. Sikoyo tokosala pe srcdossier na biso, stylesheet, na fichier JavaScript pona ko arrondir structure ya projet. Salá oyo elandi uta na my-project, to sala na mabɔkɔ ebongiseli ya dosyé mpe ya fisyé oyo emonisami awa na nse.

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

Ntango osilisi, mosala na yo mobimba esengeli kozala boye:

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

Na point oyo, nionso ezali na esika ya malamu, kasi Parcel esengeli na page HTML mpe script npm mpo na kobanda serveur na biso.

Bobongisa Parcelle

Na ba dépendances installées mpe dossier ya projet na biso prêt mpo tobanda codage, tokoki sikoyo ko configurer Parcel mpe ko tambuisa projet na biso localement. Parcel yango moko esengaka fichier ya configuration te par design, kasi tozali na besoin ya script npm na fichier HTML pona kobanda serveur na biso.

Tondisa src/index.htmlfisyé yango. Parcel esengeli na lokasa moko mpo na kosala rendu, yango wana tosalelaka index.htmllokasa na biso mpo na kotya mwa HTML ya moboko, bakisa mpe ba fichiers na biso ya CSS mpe JavaScript.
```
<!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>
```
Tozali ko inclure mua styling ya Bootstrap awa na div class="container"pe <button>po to mona tango CSS ya Bootstrap ezo charger na Webpack.

Parcel eko détecter automatiquement tozali kosalela Sass pe eko installer plugin ya Sass Parcel pona ko soutenir yango. Kasi, soki olingi, okoki mpe kosala na mabɔkɔ npm i --save-dev @parcel/transformer-sass.
Bobakisa ba scripts ya Parcel npm. Fungola mpe bakisa script package.jsonoyo elandi na eloko yango. Tokosalela script oyo pona kobanda serveur na biso ya développement ya Parcel pe ko rendre fichier HTML oyo tosalaki sima ya ko compiler yango na répertoire.startscriptsdist
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Et enfin, tokoki kobanda Parcelle. Na my-projectdossier na terminal na yo, sala script wana ya sika ya npm oyo ebakisami:
```
npm start
```

Na eteni elandi mpe ya nsuka ya buku oyo, tokokɔtisa CSS mpe JavaScript nyonso ya Bootstrap.

Kokɔtisa na Bootstrap

Ko kotisa Bootstrap na Parcel esengaka ko kotisa mibale, moko na kati ya biso styles.scssmpe moko na kati ya biso main.js.

Kokɔtisa CSS ya Bootstrap. Bakisa oyo elandi na mpo src/scss/styles.scssna kokɔtisa nyonso ya Bootstrap ya source Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Okoki pe ko importer ba feuilles de style na biso moko moko soki olingi. Tanga ba docs na biso ya import ya Sass pona ba détails.
Importer JS ya Bootstrap. Bakisa oyo elandi na mpo src/js/main.jsna kokɔtisa JS nyonso ya Bootstrap. Popper ekozala importé automatiquement na nzela ya Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Okoki mpe kokɔtisa ba plugins ya JavaScript mokomoko soki esengeli mpo na kobatela bonene ya ba paquets na nse:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Tanga ba docs na biso ya JavaScript pona ba informations ebele na ndenge ya kosalela ba plugins ya Bootstrap.
Mpe osilisi! 🎉 Na source ya Bootstrap Sass na JS entièrement chargé, serveur ya développement local na yo esengeli sikoyo ezala boye.

Sikoyo okoki kobanda kobakisa ba composants nionso ya Bootstrap oyo olingi kosalela. Bozala sûr ya kotala projet ya exemple ya Parcel mobimba pona ndenge ya ko inclure Sass personnalisé ya kobakisa pe ko optimiser kotonga na yo na ko importer kaka ba parties ya CSS na JS ya Bootstrap oyo oza na besoin na yango.

Omoni eloko moko ya mabe to esi esila awa? Svp fungola likambo moko na GitHub . Ozali na mposa ya lisalisi mpo na kosilisa mikakatano? Luka to banda lisolo na GitHub.