Correa de botas & Vite rehegua

Pe guía oficial mba’éichapa ikatu emoinge ha embojoaju Bootstrap CSS ha JavaScript nde proyecto-pe eipurúvo Vite.

Ko páhinape

¿Resaltasépa ipahaite peve? Emboguejy código fuente ha demostración omba’apóva ko guía-pe g̃uarã twbs/examples ñeñongatuhágui . Ikatu avei eipe’a techapyrã StackBlitz -pe edición en vivo-pe g̃uarã.

Mbohete

Romopu’ã hína peteĩ proyecto Vite Bootstrap ndive zero guive, upévare oĩ peteĩ requisito previo ha umi paso tenondegua ikatu mboyve añetehápe roñepyrũ. Ko ñemboheko ojerure oguereko hag̃ua Node.js oñemboguapýva ha michĩmi familiaridad terminal rehegua.

Ejapo peteĩ proyecto ryru ha emohenda npm. Jajapóta pe my-projectcarpeta ha ñamoñepyrũta npm -yargumento reheve ani hag̃ua ojapo ñandéve opaite porandu interactivo.
```
mkdir my-project && cd my-project
npm init -y
```
Emoĩ Vite. Ndaijojaháiri ore Webpack ñe’ẽmondo ndive, oĩ peteĩ tembipuru’i ñemopu’ã jepytaso añoite ko’ápe. Jaipuru --save-devñaseñala haguã ko dependencia ha’eha desarrollo jeporurãnte ha ndaha’éi producción-pe guarã.
```
npm i --save-dev vite
```
Emoĩ Bootstrap. Ko’áĝa ikatu ñamoĩ Bootstrap. Avei romoĩta Popper ore dropdown, popover ha tembipuru’i odepende guive hese oñemohenda hag̃ua. Ndereplaneairamo reipuru hag̃ua umi componente, ikatu remboyke Popper ko’ápe.
```
npm i --save bootstrap @popperjs/core
```
Emoĩ dependencia adicional. Vite ha Bootstrap ykére, ñaikotevẽ ambue dependencia (Sass) ñamoinge ha ñambojoaju porã hag̃ua Bootstrap CSS.
```
npm i --save-dev sass
```

Koꞌág̃a jaguerekóma opaite dependencia oñeikotevẽva oñemboguapy ha oñembosakoꞌi, ikatu jaike tembiaporãme jajapóvo umi proyecto rembiapokue ha ñamoinge Bootstrap.

Proyecto estructura rehegua

Rojapóma pe my-projectcarpeta ha roñepyrũma npm. Koꞌág̃a jajapóta avei ñande srccarpeta, estilo hoja ha JavaScript rembiapokue ñamohuꞌa hag̃ua proyecto estructura. Emombaꞌapo koꞌa mbaꞌe my-project, térã ejapo nde po rupive kundaha ha vore ñemohenda ojehechaukáva iguýpe.

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

Rejapopa rire, ne proyecto completo ojehechava’erã kóicha:

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

Ko'ã momento, opa mba'e oime hendaitépe, pero Vite nomba'apói noromyenyhêigui vite.config.jsgueteri ore.

Oñemohenda Vite

Oñemoĩvo umi dependencia ha ñande proyecto carpeta oĩmava ñañepyrũ hag̃ua codificación, koꞌág̃a ikatu ñamohenda Vite ha ñamombaꞌapo ñande proyecto localmente.

Eipe’a vite.config.jsnde editor-pe. Oĩgui en blanco, tekotevẽta ñamoĩ hese michĩmi boilerplate config ikatu hag̃uáicha ñamoñepyrũ ñande servidor. Ko config pehẽngue heꞌi Vite-pe haꞌevaꞌekue oheka hag̃ua ore proyecto JavaScript ha mbaꞌeichaitépa oñekomportavaꞌerã pe servidor desarrollo rehegua (oipeꞌavaꞌekue srccarpeta-gui recarga haku reheve).
```
const path = require('path')

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

Upe rire ñamyenyhẽ src/index.html. Kóva haꞌehína HTML página Vite okargátava kundahárape oipuru hag̃ua CSS ha JS oñembojoajúva ñamoĩtava hese umi tembiaporã oúvape.

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

Roike hína ko’ápe michĩmi Bootstrap estilo rehegua pe div class="container"ha <button>ikatu hag̃uáicha rohecha araka’épa ojekarga Bootstrap CSS Vite rupive.

Koꞌág̃a ñaikotevẽ peteĩ script npm rehegua ñamombaꞌapo hag̃ua Vite. Eipe’a package.jsonha emoĩve pe startscript ojehechaukáva iguýpe (reguerekómava’erã pe script prueba rehegua). Jaipurúta ko script ñamoñepyrũ hag̃ua ñande servidor dev Vite local.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ha ipahápe, ikatu ñamoñepyrũ Vite. Pe my-projectkundaha oĩva nde terminal-pe guive, emongu’e upe script npm oñembojoapy pyahúva:
```
npm start
```

Ko ñembohekopyrã vore oúva ha ipahaitépe, jaguerúta opaite Bootstrap CSS ha JavaScript.

Importación Ñepyrũrã

Emohenda Bootstrap Sass jegueru vite.config.js. Ko’áĝa ne rembiapokue ñembohekorã oñembotýma ha ojoaju va’erã pe ñe’ẽmondo iguýpe. Peteĩ pehẽngue pyahu añoite ko’ápe ha’e pe resolvesección—roipuru kóva romoĩ hag̃ua peteĩ alias ore archivo fuente-pe hyepýpe node_modulesoñeñongatu hag̃ua importación simple ikatuháicha.
```
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
  }
}
```
Koꞌág̃a, ñamoinge Bootstrap CSS. Emoĩ ko’ãva src/scss/styles.scssto emoinge hag̃ua opaite Bootstrap ypykue Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ikatu avei regueru ore hoja de estilo peteĩteĩ reipotáramo. Emoñe’ẽ ore Sass import docs rehegua umi detalle rehegua.
Upe rire jakarga CSS ha ñamoinge Bootstrap JavaScript. Emoĩ ko’ãva src/js/main.jsto ekargávo CSS ha emoinge opaite Bootstrap JS. Popper ojegueru jeýta ijeheguiete Bootstrap rupive.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Ikatu avei emoinge JavaScript plugins peteĩteĩ tekotevẽháicha eñongatu hag̃ua umi paquete tuichakue oguejy:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Emoñe’ẽ ore JavaScript kuatiañe’ẽ reikuaave hag̃ua mba’éichapa ojepurukuaa Bootstrap mboajepyréva.
Ha nde rejapopa! 🎉 Bootstrap ypykue Sass ha JS ojekargapaitévo, ne servidor desarrollo local ko’áĝa ojehechava’erã péicha.

Ko’áĝa ikatu eñepyrũ emoĩve oimeraẽva componente Bootstrap rehegua reipuruséva. Ejesareko katuete Vite techapyrã proyecto completo rehe mba’éichapa emoinge Sass personalizado adicional ha emoporãve ne ñemopu’ã eguerúvo Bootstrap CSS ha JS pehẽngue añoite reikotevẽva.

¿Rehechápa koʼápe peteĩ mbaʼe naiporãiva térã ndojeporúiva? Eipe’a peteĩ mba’e’apopy GitHub -pe . ¿Reikotevẽ pytyvõ oñemyatyrõ hag̃ua? Eheka térã emoñepyrũ peteĩ ñomongeta GitHub-pe.