Bootstrap & Pacel

Opinber leiðarvísir um hvernig á að innihalda og sameina CSS og JavaScript Bootstrap í verkefninu þínu með því að nota Parcel.

Á þessari síðu

Viltu sleppa til enda? Sæktu frumkóðann og sýnishornið fyrir þessa handbók frá twbs/examples geymslunni . Þú getur líka opnað dæmið í StackBlitz en ekki keyrt það vegna þess að Parcel er ekki stutt þar.

Uppsetning

Við erum að byggja upp pakkaverkefni með Bootstrap frá grunni, svo það eru nokkrar forsendur og fyrstu skref áður en við getum byrjað fyrir alvöru. Þessi handbók krefst þess að þú hafir Node.js uppsett og þekkir flugstöðina.

Búðu til verkefnamöppu og settu upp npm. Við búum til my-projectmöppuna og frumstillum npm með -yrökunum til að forðast að hún spyrji okkur allra gagnvirku spurninganna.
```
mkdir my-project && cd my-project
npm init -y
```
Settu upp pakka. Ólíkt Webpack handbókinni okkar, þá er aðeins eitt byggingartól háð hér. Pakkinn mun sjálfkrafa setja upp tungumálaspenna (eins og Sass) þegar hann finnur þá. Við notum --save-devtil að gefa til kynna að þessi ósjálfstæði er aðeins til notkunar í þróun en ekki til framleiðslu.
```
npm i --save-dev parcel
```
Settu upp Bootstrap. Nú getum við sett upp Bootstrap. Við munum einnig setja upp Popper þar sem fellivalmyndir okkar, sprettigluggar og verkfæraleiðbeiningar eru háðar staðsetningu þeirra. Ef þú ætlar ekki að nota þessa íhluti geturðu sleppt Popper hér.
```
npm i --save bootstrap @popperjs/core
```

Nú þegar við höfum öll nauðsynleg ósjálfstæði uppsett, getum við byrjað að búa til verkefnaskrárnar og flytja inn Bootstrap.

Uppbygging verkefnis

Við höfum þegar búið til my-projectmöppuna og frumstillt npm. Nú munum við líka búa til srcmöppu, stílblað og JavaScript skrá til að klára verkefnisskipulagið. Keyrðu eftirfarandi úr my-project, eða búðu til handvirkt möppuna og skráarskipulagið sem sýnt er hér að neðan.

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

Þegar þú ert búinn ætti heildarverkefnið þitt að líta svona út:

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

Á þessum tímapunkti er allt á réttum stað, en Parcel þarf HTML síðu og npm skriftu til að ræsa netþjóninn okkar.

Stilla pakka

Með ósjálfstæði uppsett og verkefnamöppan okkar tilbúin fyrir okkur til að byrja að kóða, getum við nú stillt Parcel og keyrt verkefnið okkar á staðnum. Pakkinn sjálft þarfnast engrar stillingarskrár að hönnun, en við þurfum npm skriftu og HTML skrá til að ræsa netþjóninn okkar.

Fylltu út src/index.htmlskrána. Pakkinn þarf síðu til að birta, svo við notum síðuna okkar index.htmltil að setja upp grunn HTML, þar á meðal CSS og JavaScript skrárnar okkar.

<!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ð erum að setja smá af Bootstrap stíl hér með div class="container"og <button>svo að við sjáum hvenær CSS Bootstrap er hlaðið af Webpack.

Parcel greinir sjálfkrafa að við erum að nota Sass og setur upp Sass Parcel viðbótina til að styðja það. Hins vegar, ef þú vilt, geturðu líka keyrt handvirkt npm i --save-dev @parcel/transformer-sass.

Bættu við Parcel npm forskriftunum. Opnaðu package.jsonog bættu eftirfarandi startskriftu við scriptshlutinn. Við munum nota þetta handrit til að ræsa pakkaþróunarþjóninn okkar og gera HTML skrána sem við bjuggum til eftir að hún hefur verið sett saman í distmöppuna.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Og loksins getum við byrjað að pakka. Í my-projectmöppunni í flugstöðinni þinni skaltu keyra þetta nýlega bætta npm forskrift:
```
npm start
```

Í næsta og síðasta hluta þessarar handbókar munum við flytja inn allt CSS og JavaScript frá Bootstrap.

Flytja inn Bootstrap

Innflutningur Bootstrap inn í pakka krefst tveggja innflutnings, einn í okkar styles.scssog einn í okkar main.js.

Flytja inn CSS Bootstrap. Bættu eftirfarandi við til src/scss/styles.scssað flytja inn allan uppruna Sass frá Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Þú getur líka flutt inn stílblöðin okkar fyrir sig ef þú vilt. Lestu Sass innflutningsskjölin okkar fyrir frekari upplýsingar.
Flytja inn Bootstrap's JS. Bættu eftirfarandi við til src/js/main.jsað flytja inn alla Bootstrap's JS. Popper verður fluttur inn sjálfkrafa í gegnum Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Þú getur líka flutt inn JavaScript viðbætur hver fyrir sig eftir þörfum til að halda búntastærðum niðri:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lestu JavaScript skjölin okkar til að fá frekari upplýsingar um hvernig á að nota viðbætur Bootstrap.
Og þú ert búinn! 🎉 Með uppruna Sass og JS frá Bootstrap fullhlaðin ætti staðbundinn þróunarþjónn þinn núna að líta svona út.

Nú geturðu byrjað að bæta við hvaða Bootstrap íhlutum sem þú vilt nota. Vertu viss um að kíkja á heildarpakkadæmisverkefnið um hvernig á að innihalda viðbótar sérsniðið Sass og fínstilla bygginguna þína með því að flytja aðeins inn þá hluta Bootstrap CSS og JS sem þú þarft.

Sérðu eitthvað rangt eða úrelt hér? Vinsamlegast opnaðu mál á GitHub . Þarftu hjálp við bilanaleit? Leitaðu eða byrjaðu umræðu á GitHub.