Bootstrap & Pakete nga

Ti opisial a giya no kasano nga iraman ken bundle ti CSS ken JavaScript ti Bootstrap iti proyektom babaen ti panagusar ti Parcel.

Iti daytoy a panid

Kayatmo kadi ti aglaktaw agingga iti ngudo? I-download ti taudan a kodigo ken ti agtartrabaho a demo para iti daytoy a giya manipud iti pagidulinan ti twbs/examples . Mabalinmo pay a luktan ti pagarigan iti StackBlitz ngem saanmo nga ipatarayen daytoy gapu ta ti Parcel ket saan nga agdama a nasuportaran sadiay.

Iyasmang

Mangbangbangonkami iti proyekto ti Parcel babaen ti Bootstrap manipud iti rugi, isu nga adda sumagmamano a kasapulan ken up front steps sakbay a talaga a makarugikami. Daytoy a giya ket kasapulan nga addaanka iti Node.js a naikabil ken sumagmamano a pannakaammo iti terminal.

Mangaramid ti project folder ken mangiset-up ti npm. Mangaramid tayo ti my-projectfolder ken initialize tayo ti npm nga addaan ti -yargumento tapno maliklikan ti panagsaludsod na kadatayo amin nga interactive questions.
```
mkdir my-project && cd my-project
npm init -y
```
Ikabil ti Parsela. Saan a kas ti giyatayo iti Webpack, adda laeng ti maymaysa a panagpannuray ti ramit ti panagbangon ditoy. Automatiko a mangikabil ti Parcel kadagiti language transformer (kas iti Sass) bayat a madlawna dagitoy. Usarenmi --save-deva mangipasimudaag a daytoy a panagpannuray ket para laeng iti panagusar iti panagdur-as ken saan a para iti produksion.
```
npm i --save-dev parcel
```
I-install ti Bootstrap. Ita, mabalintayon nga i-install ti Bootstrap. I-install mi met ti Popper yantangay agpannuray dagiti dropdown, popover, ken tooltip mi iti dayta para iti positioning da. No dika plano nga usaren dagita a paset, mabalinmo a liklikan ti Popper ditoy.
```
npm i --save bootstrap @popperjs/core
```

Ita ta addaantayon kadagiti amin a kasapulan a panagpannuray a naikabil, mabalintayo ti makastrek iti trabaho a mangpartuat kadagiti file ti proyekto ken mangi-import ti Bootstrap.

Estruktura ti proyekto

Naaramidtayon ti my-projectfolder ken nairugi ti npm. Ita, mangaramid tayo met ti srcfolder, stylesheet, ken JavaScript file tayo tapno ma-round out ti project structure. Ipatarayen ti sumaganad manipud iti my-project, wenno manual a mangpartuat ti folder ken estruktura ti papeles a naipakita iti baba.

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

No nalpaskan, ti kompleto a proyektom ket rumbeng a kastoy ti langana:

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

Iti daytoy a punto, amin ket adda iti umno a lugar, ngem kasapulan ti Parcel ti panid ti HTML ken npm nga iskrip tapno mairugi ti servermi.

Ikonfigura ti Parsela

Iti dependencies a naikabil ken nakasagana ti folder ti proyektomi para kadakami a mangrugi iti panagkodigo, mabalinmi itan nga i-configure ti Parcel ken ipatarayen ti proyektomi iti lokal. Ti mismo a parsela ket agkasapulan ti awan a file ti panagisaad babaen ti disenio, ngem kasapulanmi ti npm nga iskrip ken ti HTML a papeles tapno mangrugi ti serbidormi.

Punnuem ti src/index.htmlfile. Kasapulan ti Parcel ti panid tapno maiparang, isu nga usarenmi ti index.htmlpanidmi tapno mangiset-up iti sumagmamano a kangrunaan nga HTML, agraman dagiti CSS ken JavaScript a filemi.
```
<!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>
```
Iramanmi ti bassit a Bootstrap styling ditoy nga addaan iti div class="container"ken <button>tapno makitami no ti CSS ti Bootstrap ket maikarga babaen ti Webpack.

Automatiko a madlaw ti Parcel nga us-usarenmi ti Sass ken i-install ti plugin ti Sass Parcel tapno suportaranna dayta. Nupay kasta, no kayatmo, mabalinmo met a manual nga ipatarayen npm i --save-dev @parcel/transformer-sassti .
Inayon dagiti iskrip ti Parcel npm. Luktan ti package.jsonken inayon ti sumaganad startnga iskrip iti scriptsbanag. Usarenmi daytoy nga iskrip tapno rugian ti serbidormi a panagrang-ay ti Parsela ken i-render ti HTML a file a pinartuatmi kalpasan a naurnong daytoy iti distdirektorio.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ket kamaudiananna, mabalintayo a rugian ti Parcel. Manipud iti my-projectfolder iti terminalmo, tarayen dayta baro a nainayon nga npm script:
```
npm start
```

Iti sumaganad ken maudi a benneg iti daytoy a giya, i-importmi amin a CSS ken JavaScript ti Bootstrap.

I-import ti Bootstrap

Ti panag-import ti Bootstrap iti Parcel ket kasapulan ti dua nga import, maysa iti our styles.scssken maysa iti main.js.

I-import ti CSS ti Bootstrap. Inayon ti sumaganad iti tapno src/scss/styles.scssmai-import amin ti taudan ti Bootstrap a Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Mabalinmo met nga i-import dagiti stylesheet-mi a saggaysa no kayatmo. Basaen dagiti Sass import docs mi para kadagiti detalye.
I-import ti JS ti Bootstrap. Inayon ti sumaganad iti tapno src/js/main.jsmai-import amin ti JS ti Bootstrap. Automatiko a mai-import ti Popper babaen ti Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Mabalinmo pay nga i-import dagiti plugin ti JavaScript a saggaysa no kasapulan tapno agtalinaed a nababbaba dagiti kadakkel ti bundle:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Basaen dagiti dok-mi ti JavaScript para iti ad-adu pay nga impormasion no kasano nga usaren dagiti plugin ti Bootstrap.
Ket nalpasmon! 🎉 Iti naan-anay a karga ti source ti Bootstrap a Sass ken JS, ti lokal a development server-mo ket rumbeng itan a kastoy ti langana.

Now you can start adding any Bootstrap components you want to use. Be sure to check out the complete Parcel example project for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap’s CSS and JS that you need.

See something wrong or out of date here? Please open an issue on GitHub. Need help troubleshooting? Search or start a discussion on GitHub.