Correa de Botas & Paquete rehegua

Pe guía oficial mba’éichapa ikatu emoinge ha embojoaju Bootstrap CSS ha JavaScript nde proyecto-pe eipuruhápe Parcel.

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 ha katu ani emongu’e Parcel ndojeguerohorýigui upépe ko’áĝaite.

Mbohete

Romopu’ã hína peteĩ proyecto Parcel 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
```
Oñemoĩ Parcela. Ndaijojaháiri ore Webpack ñe’ẽmondo ndive, oĩ peteĩ tembipuru’i ñemopu’ã jepytaso añoite ko’ápe. Parcel omoĩta ijeheguiete umi transformador ñe’ẽ rehegua (Sass-icha) ohechakuaávo. Jaipuru --save-devñaseñala haguã ko dependencia ha’eha desarrollo jeporurãnte ha ndaha’éi producción-pe guarã.
```
npm i --save-dev parcel
```
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
```

Koꞌág̃a jaguerekóma opaite dependencia oñeikotevẽva oñemboguapýva, ikatu ñañepyrũ ñambaꞌapo 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

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

Ko’áĝaite, opa mba’e oĩ hendaitépe, ha katu Parcel oikotevẽ peteĩ página HTML ha script npm omoñepyrũ hag̃ua ñande servidor.

Oñemohenda Parcela rehegua

Oñemoĩvo umi dependencia ha ñande proyecto carpeta oĩmava ñañepyrũ hag̃ua codificación, koꞌág̃a ikatu ñamohenda Parcel ha ñamombaꞌapo ñande proyecto localmente. Parcel voi noikotevẽi mba’eveichagua vore configuración rehegua diseño rupive, ha katu ñaikotevẽ peteĩ script npm ha peteĩ archivo HTML ñamoñepyrũ hag̃ua ñande servidor.

Emyenyhẽ pe src/index.htmlarchivo. Parcel oikotevẽ peteĩ página ojehechauka hag̃ua, upévare roipuru ore index.htmlpágina romohenda hag̃ua peteĩ HTML básico, umíva apytépe ore CSS ha JavaScript rembiapokue.
```
<!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>
```
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 Webpack rupive.

Parcel ohechakuaáta ijeheguiete jaipuruha Sass ha omoĩ Sass Parcel plugin oipytyvõ hag̃ua. Ha katu, reipotáramo, ikatu avei emongu’e nde po rupive npm i --save-dev @parcel/transformer-sass.
Oñemoĩve umi script Parcela npm rehegua. Eipeꞌa pe package.jsonha emoĩ koꞌa startscript scriptsmbaꞌerecharãme. Jaipurúta ko script ñamoñepyrũ hag̃ua ñande servidor Parcel ñemoheñói rehegua ha ñamohaꞌãnga hag̃ua HTML vore jajapovaꞌekue oñemboheko rire distkundahárape.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ha ipahápe, ikatu ñañepyrũ Parcela. 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ã

Ojegueru hag̃ua Bootstrap Parcel-pe oikotevẽ mokõi importación, peteĩ ñande ryepýpe styles.scssha peteĩ ñande main.js.

Egueru Bootstrap CSS rehegua. 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.
Importa Bootstrap rehegua JS. Emoĩ ko’ãva src/js/main.jsto emoinge hag̃ua opaite Bootstrap JS. Popper ojegueru jeýta ijeheguiete Bootstrap rupive.
```
// 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 Parcel techapyrã proyecto completo mba’éichapa emoinge Sass personalizado adicional ha emoporãve ne ñemopu’ã egueru rupi 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.