Bootstrap eta Vite

Vite erabiliz Bootstrap-en CSS eta JavaScript zure proiektuan sartzeko eta lotzeko gida ofiziala.

Orrialde honetan

Amaierara joan nahi? Deskargatu gida honen iturburu-kodea eta lan-demoa twbs/examples biltegitik . StackBlitz-en ere ireki dezakezu adibidea zuzeneko ediziorako.

Konfigurazioa

Bootstrap-ekin Vite proiektu bat eraikitzen ari gara hutsetik, beraz, aurrebaldintza eta urrats batzuk daude benetan hasteko. Gida honek Node.js instalatuta eta terminala nolabait ezagutzea eskatzen du.

Sortu proiektuaren karpeta eta konfiguratu npm. Karpeta sortuko dugu my-projecteta argumentuarekin npm hasieratuko -ydugu galdera interaktibo guztiak ez egiteko.
```
mkdir my-project && cd my-project
npm init -y
```
Instalatu Vite. Gure Webpack gida ez bezala, hemen eraikitze-tresnaren menpekotasun bakarra dago. --save-devMendekotasun hori garapenerako erabilerarako soilik dela adierazten dugu eta ez ekoizpenerako .
```
npm i --save-dev vite
```
Instalatu Bootstrap. Orain Bootstrap instalatu dezakegu. Popper ere instalatuko dugu, gure goitibehurrak, popover-ak eta tresna-aholkuak kokatzearen araberakoak baitira. Osagai horiek erabiltzeko asmorik ez baduzu, Popper ezaba dezakezu hemen.
```
npm i --save bootstrap @popperjs/core
```
Instalatu menpekotasun gehigarria. Vite eta Bootstrap-ez gain, beste menpekotasun bat (Sass) behar dugu Bootstrap-en CSS behar bezala inportatzeko eta lotzeko.
```
npm i --save-dev sass
```

Orain beharrezko menpekotasun guztiak instalatuta eta konfiguratuta ditugula, proiektuaren fitxategiak sortzen eta Bootstrap inportatzen has gaitezke.

Proiektuaren egitura

my-projectKarpeta sortu eta npm hasieratu dugu dagoeneko . srcOrain gure karpeta, estilo orria eta JavaScript fitxategia ere sortuko ditugu proiektuaren egitura biribiltzeko. Exekutatu hau hemendik my-projectedo sortu eskuz behean agertzen den karpeta eta fitxategi-egitura.

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

Amaitzen duzunean, zure proiektu osoa honelakoa izan beharko litzateke:

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

Momentu honetan, dena leku egokian dago, baina Vitek ez du funtzionatuko, oraindik bete ez dugulako vite.config.js.

Konfiguratu Vite

Mendekotasunak instalatuta eta gure proiektuaren karpeta prest kodetzen hasteko, orain Vite konfiguratu eta gure proiektua lokalean exekutatu dezakegu.

Ireki vite.config.jszure editorean. Hutsik dagoenez, boilerplate konfigurazio batzuk gehitu beharko dizkiogu, gure zerbitzaria abiarazi ahal izateko. Konfigurazioaren zati honek Viteri gure proiektuaren JavaScript eta garapen zerbitzariak nola jokatu beharko lukeen ( srckarpetatik aterata birkarga beroarekin) bilatu behar zuela esaten dio.
```
const path = require('path')

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

Hurrengoa beteko dugu src/index.html. Hau da Vite-k arakatzailean kargatuko duen HTML orria geroago gehituko ditugun CSS eta JS-a erabiltzeko.

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

Bootstrap estiloaren apur bat sartzen ari gara hemen div class="container"eta , <button>beraz, Bootstrap-en CSS Vite-k noiz kargatzen duen ikus dezagun.

Orain npm script bat behar dugu Vite exekutatzeko. Ireki package.jsoneta gehitu startbehean agertzen den script-a (dagoeneko proba-scripta izan beharko zenuke). Script hau erabiliko dugu gure tokiko Vite dev zerbitzaria abiarazteko.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Eta azkenik, Vite martxan jarri dezakegu. Zure terminaleko my-projectkarpetatik, exekutatu gehitu berri den npm script hori:
```
npm start
```

Gida honen hurrengo eta azken atalean, Bootstrap-en CSS eta JavaScript guztiak inportatuko ditugu.

Inportatu Bootstrap

Konfiguratu Bootstrap-en Sass inportazioa vite.config.js. Zure konfigurazio fitxategia osatu da eta beheko zatiarekin bat etorri beharko luke. Hemen atal berri bakarra resolveatala da; hau erabiltzen dugu barruko iturburu-fitxategiei alias bat gehitzeko node_modulesinportazioak ahalik eta errazen izan daitezen.
```
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
  }
}
```
Orain, inporta dezagun Bootstrap-en CSS. Gehitu honako hau src/scss/styles.scssBootstrap-en Sass iturburu guztia inportatzeko.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Nahi izanez gero, gure estilo-orriak banaka inporta ditzakezu. Irakurri gure Sass inportazio dokumentuak xehetasunetarako.
Ondoren CSS kargatu eta Bootstrap-en JavaScript inportatuko dugu. Gehitu honako hau src/js/main.jsCSS kargatzeko eta Bootstrap-en JS guztiak inportatzeko. Popper automatikoki inportatuko da Bootstrap bidez.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
JavaScript pluginak ere inporta ditzakezu banan-banan, behar izanez gero, sorta-tamainak txikiagotzeko:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Irakurri gure JavaScript dokumentuak Bootstrap-en pluginak nola erabiltzeari buruzko informazio gehiago lortzeko.
Eta amaitu duzu! 🎉 Bootstrap-en Sass eta JS iturburua guztiz kargatuta dagoenez, zure tokiko garapen zerbitzariak honela izango luke orain.

Orain erabili nahi dituzun Bootstrap osagaiak gehitzen has zaitezke. Ziurtatu Vite adibide-proiektu osoa ikusteko Sass pertsonalizatu osagarriak nola sartu eta zure eraikuntza optimizatu behar dituzun Bootstrap-en CSS eta JS zatiak soilik inportatuz.

Zerbait gaizki edo zaharkitua ikusten duzu hemen? Mesedez , ireki arazo bat GitHub-en . Laguntza behar duzu arazoak konpontzeko? Bilatu edo hasi eztabaida bat GitHub-en.