Bootstrap & Vite

Opinber leiðarvísir um hvernig á að innihalda og sameina Bootstrap CSS og JavaScript í verkefnið þitt með því að nota Vite.

Á þ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 fyrir lifandi klippingu.

Uppsetning

Við erum að byggja upp Vite verkefni 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 Vite. Ólíkt Webpack handbókinni okkar, þá er aðeins eitt byggingartól háð hér. 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 vite
```
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
```
Settu upp viðbótarfíkn. Til viðbótar við Vite og Bootstrap, þurfum við aðra ósjálfstæði (Sass) til að flytja inn og setja saman CSS Bootstrap's.
```
npm i --save-dev sass
```

Nú þegar við höfum öll nauðsynleg ósjálfstæði sett upp og uppsetningu, 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 vite.config.js

Þ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
└── vite.config.js

Á þessum tímapunkti er allt á réttum stað, en Vite mun ekki virka vegna þess að við höfum ekki fyllt út okkar vite.config.jsennþá.

Stilla Vite

Með ósjálfstæði uppsett og verkefnamöppan okkar tilbúin fyrir okkur til að byrja að kóða, getum við nú stillt Vite og keyrt verkefnið okkar á staðnum.

Opnaðu vite.config.jsí ritlinum þínum. Þar sem það er autt, þurfum við að bæta einhverjum boilerplate config við það svo við getum ræst þjóninn okkar. Þessi hluti af stillingunni segir Vite að leita að JavaScript verkefnisins okkar og hvernig þróunarþjónninn ætti að haga sér (draga úr srcmöppunni með heitri endurhleðslu).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

Næst fyllum við út src/index.html. Þetta er HTML síðan sem Vite mun hlaða í vafranum til að nota búnt CSS og JS sem við munum bæta við það í síðari skrefum.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

Við erum að setja smá Bootstrap stíl hér með div class="container"og <button>svo að við sjáum hvenær CSS Bootstrap er hlaðið af Vite.

Nú þurfum við npm skriftu til að keyra Vite. Opnaðu package.jsonog bættu við starthandritinu sem sýnt er hér að neðan (þú ættir nú þegar að hafa prófunarforskriftina). Við munum nota þetta handrit til að ræsa staðbundna Vite þróunarþjóninn okkar.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Og loksins getum við byrjað Vite. Í 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

Settu upp Sass innflutning Bootstrap í vite.config.js. Stillingarskránni þinni er nú lokið og ætti að passa við brotið hér að neðan. Eini nýi hlutinn hér er resolvehlutinn - við notum þetta til að bæta samnefni við frumskrárnar okkar inni node_modulestil að hafa innflutning eins einfaldan og mögulegt er.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
Nú skulum við 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.
Næst hleðum við CSS og flytjum inn JavaScript Bootstrap. Bættu eftirfarandi við til src/js/main.jsað hlaða CSS og flytja inn alla Bootstrap's JS. Popper verður fluttur inn sjálfkrafa í gegnum Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 á heildar Vite dæmi verkefnið 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.