Bootstrap & Pako

La oficiala gvidilo pri kiel inkludi kaj kunligi CSS kaj JavaScript de Bootstrap en via projekto uzante Parcel.

Sur ĉi tiu paĝo

Ĉu vi volas salti ĝis la fino? Elŝutu la fontkodon kaj labordemonstraĵon por ĉi tiu gvidilo el la twbs/examples-deponejo . Vi ankaŭ povas malfermi la ekzemplon en StackBlitz sed ne ruli ĝin ĉar Parcel ne estas nuntempe subtenata tie.

Agordi

Ni konstruas Parcel-projekton kun Bootstrap de nulo, do ekzistas kelkaj antaŭkondiĉoj kaj antaŭaj paŝoj antaŭ ol ni vere povas komenci. Ĉi tiu gvidilo postulas, ke vi havu Node.js instalita kaj iom da familiareco kun la terminalo.

Kreu projektan dosierujon kaj agordu npm. Ni kreos la my-projectdosierujon kaj pravalorigos npm kun la -yargumento por eviti ke ĝi faru al ni ĉiujn interagajn demandojn.
```
mkdir my-project && cd my-project
npm init -y
```
Instalu Parcel. Male al nia Webpack-gvidilo, ekzistas nur unu konstruila dependeco ĉi tie. Parcel aŭtomate instalos lingvajn transformilojn (kiel Sass) kiam ĝi detektas ilin. Ni uzas --save-devpor signali, ke ĉi tiu dependeco estas nur por disvolva uzo kaj ne por produktado.
```
npm i --save-dev parcel
```
Instalu Bootstrap. Nun ni povas instali Bootstrap. Ni ankaŭ instalos Popper ĉar niaj falmenuoj, popovers kaj konsiletoj dependas de ĝi por sia poziciigado. Se vi ne planas uzi tiujn komponantojn, vi povas preterlasi Popper ĉi tie.
```
npm i --save bootstrap @popperjs/core
```

Nun kiam ni havas ĉiujn necesajn dependecojn instalitajn, ni povas eklabori kreante la projektodosierojn kaj importante Bootstrap.

Projekta strukturo

Ni jam kreis la my-projectdosierujon kaj pravigis npm. Nun ni ankaŭ kreos nian srcdosierujon, stilfolion kaj JavaScript-dosieron por rondigi la projektan strukturon. Rulu la jenon de my-project, aŭ permane kreu la dosierujon kaj dosierstrukturon montritan sube.

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

Kiam vi finos, via kompleta projekto devus aspekti jene:

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

Je ĉi tiu punkto, ĉio estas en la ĝusta loko, sed Parcel bezonas HTML-paĝon kaj npm-skripton por komenci nian servilon.

Agordu Pakaĵon

Kun dependecoj instalitaj kaj nia projekta dosierujo preta por ni komenci kodigon, ni nun povas agordi Parcel kaj ruli nian projekton loke. Pakaĵo mem postulas neniun agordan dosieron laŭ dezajno, sed ni bezonas npm-skripton kaj HTML-dosieron por komenci nian servilon.

Plenigu la src/index.htmldosieron. Parcel bezonas paĝon por bildigi, do ni uzas nian index.htmlpaĝon por agordi iom da baza HTML, inkluzive de niaj CSS kaj JavaScript-dosieroj.

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

Ni inkluzivas iom da Bootstrap-stilado ĉi tie kun la div class="container"kaj <button>por ke ni vidu kiam la CSS de Bootstrap estas ŝarĝita de Webpack.

Parcel aŭtomate detektos, ke ni uzas Sass kaj instalos la kromprogramon Sass Parcel por subteni ĝin. Tamen, se vi volas, vi ankaŭ povas mane ruli npm i --save-dev @parcel/transformer-sass.

Aldonu la Parcel npm-skriptojn. Malfermu la package.jsonkaj aldonu la sekvan startskripton al la scriptsobjekto. Ni uzos ĉi tiun skripton por komenci nian Parcel-disvolvan servilon kaj redoni la HTML-dosieron, kiun ni kreis post kiam ĝi estas kompilita en la distdosierujon.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Kaj finfine, ni povas komenci Parcel. El la my-projectdosierujo en via terminalo, rulu tiun lastatempe aldonitan npm-skripton:
```
npm start
```

En la sekva kaj fina sekcio de ĉi tiu gvidilo, ni importos ĉiujn CSS kaj JavaScript de Bootstrap.

Importu Bootstrap

Importi Bootstrap en Parcel postulas du importojn, unu en nian styles.scsskaj unu en nian main.js.

Importu CSS de Bootstrap. Aldonu la jenon al src/scss/styles.scsspor importi la tutan fonton de Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Vi ankaŭ povas importi niajn stilfoliojn individue, se vi volas. Legu niajn Sass-importdokumentojn por detaloj.
Importu la JS de Bootstrap. Aldonu la jenon al src/js/main.jspor importi ĉiujn JS de Bootstrap. Popper estos aŭtomate importita per Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Vi ankaŭ povas importi JavaScript-kromaĵojn individue laŭbezone por malpliigi pakaĵgrandojn:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Legu niajn JavaScript-dokumentojn por pliaj informoj pri kiel uzi la kromaĵojn de Bootstrap.
Kaj vi finis! 🎉 Kun la fonto de Bootstrap Sass kaj JS plene ŝarĝitaj, via loka disvolva servilo nun devus aspekti tiel.

Nun vi povas komenci aldoni iujn ajn Bootstrap-komponentojn, kiujn vi volas uzi. Nepre kontrolu la kompletan ekzemplan projekton de Parcel por kiel inkluzivi plian kutiman Sass kaj optimumigi vian konstruon importante nur la partojn de CSS kaj JS de Bootstrap, kiujn vi bezonas.

Vidas ion malĝustan aŭ malmodernan ĉi tie? Bonvolu malfermi problemon en GitHub . Ĉu vi bezonas helpon pri solvo de problemoj? Serĉu aŭ komencu diskuton en GitHub.