Bootstrap ug Parcel

Ang opisyal nga giya kung unsaon pag-apil ug pag-bundle sa Bootstrap's CSS ug JavaScript sa imong proyekto gamit ang Parcel.

Niini nga panid

Gusto nga molaktaw hangtod sa katapusan? I-download ang source code ug working demo para niini nga giya gikan sa twbs/examples repository . Mahimo usab nimo ablihan ang panig-ingnan sa StackBlitz apan dili kini ipadagan tungod kay ang Parcel wala karon gisuportahan didto.

Setup

Naghimo kami usa ka proyekto sa Parcel gamit ang Bootstrap gikan sa wala, busa adunay pipila nga mga kinahanglanon ug mga lakang sa unahan sa dili pa kami makasugod. Kini nga giya nagkinahanglan kanimo nga ma-install ang Node.js ug pipila ka pamilyar sa terminal.

Paghimo og folder sa proyekto ug pag-setup sa npm. Himoon namo ang my-projectfolder ug sugdan ang npm gamit ang -yargumento aron malikayan kini nga mangutana kanamo sa tanang interactive nga mga pangutana.
```
mkdir my-project && cd my-project
npm init -y
```
I-install ang Parcel. Dili sama sa among giya sa Webpack, adunay usa ra ka pagsalig sa tool sa pagtukod dinhi. Awtomatiko nga i-install ni Parcel ang mga transformer sa lengguwahe (sama sa Sass) kung kini makit-an kini. Gigamit namon ang --save-devpagsenyas nga kini nga pagsalig alang lamang sa paggamit sa kalamboan ug dili alang sa produksiyon.
```
npm i --save-dev parcel
```
I-install ang Bootstrap. Karon mahimo na namon i-install ang Bootstrap. I-install usab namo ang Popper tungod kay ang among mga dropdown, popovers, ug tooltips nagdepende niini alang sa ilang pagposisyon. Kung wala ka nagplano sa paggamit sa mga sangkap, mahimo nimong laktawan ang Popper dinhi.
```
npm i --save bootstrap @popperjs/core
```

Karon nga naa na namo ang tanang gikinahanglang mga dependency nga na-install, makatrabaho na kami sa paghimo sa mga file sa proyekto ug pag-import sa Bootstrap.

Istruktura sa proyekto

Nahimo na namo ang my-projectfolder ug gisugdan ang npm. Karon maghimo usab kami sa among srcfolder, stylesheet, ug file sa JavaScript aron malibot ang istruktura sa proyekto. Pagdalagan ang mosunud gikan sa my-project, o kamut paghimo sa folder ug istruktura sa file nga gipakita sa ubos.

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

Kung nahuman na ka, ang imong kompleto nga proyekto kinahanglan nga ingon niini:

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

Niini nga punto, ang tanan naa sa husto nga lugar, apan ang Parcel nanginahanglan usa ka panid sa HTML ug npm script aron masugdan ang among server.

I-configure ang Parcel

Uban sa mga dependency nga na-install ug ang among project folder andam na namo sa pagsugod sa coding, mahimo na namo nga i-configure ang Parcel ug ipadagan ang among proyekto sa lokal. Ang parsela mismo wala magkinahanglan og configuration file pinaagi sa disenyo, apan nagkinahanglan kami og npm script ug HTML file aron masugdan ang among server.

Pun-a ang src/index.htmlfile. Ang parsela nagkinahanglan og usa ka panid aron ma-render, mao nga gigamit namo ang among index.htmlpanid sa pag-set up sa pipila ka batakang HTML, lakip ang among CSS ug JavaScript nga mga file.
```
<!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>
```
Among gilakip ang gamay nga pag-istilo sa Bootstrap dinhi uban ang div class="container"ug <button>aron atong makita kung ang CSS sa Bootstrap gikarga sa Webpack.

Awtomatiko nga makit-an sa Parcel nga gigamit namon ang Sass ug i-install ang Sass Parcel plugin aron suportahan kini. Bisan pa, kung gusto nimo, mahimo ka usab nga mano-mano nga modagan npm i --save-dev @parcel/transformer-sass.
Idugang ang Parcel npm scripts. Ablihi ang package.jsonug idugang ang mosunod startnga script sa scriptsbutang. Among gamiton kini nga script aron masugdan ang among Parcel development server ug i-render ang HTML file nga among gibuhat human kini ma-compile sa distdirektoryo.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ug sa katapusan, makasugod na ta sa Parcel. Gikan sa my-projectfolder sa imong terminal, padagana ang bag-ong gidugang nga npm script:
```
npm start
```

Sa sunod ug katapusang seksyon sa kini nga giya, among i-import ang tanan nga CSS ug JavaScript sa Bootstrap.

Import nga Bootstrap

Ang pag-import sa Bootstrap ngadto sa Parcel nanginahanglan og duha ka import, usa sa among styles.scssug usa sa among main.js.

Import Bootstrap's CSS. Idugang ang mosunud aron src/scss/styles.scssma-import ang tanan nga gigikanan sa Bootstrap nga Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Mahimo usab nimo nga i-import ang among mga stylesheet nga tagsa-tagsa kung gusto nimo. Basaha ang among Sass import docs para sa mga detalye.
I-import ang JS sa Bootstrap. Idugang ang mosunod aron src/js/main.jsma-import ang tanan nga JS sa Bootstrap. Ang Popper awtomatikong ma-import pinaagi sa Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Mahimo ka usab nga mag-import sa mga plugin sa JavaScript nga tagsa-tagsa kung gikinahanglan aron mapadayon ang mga gidak-on sa bundle:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Basaha ang among JavaScript docs para sa dugang nga impormasyon kon unsaon paggamit ang Bootstrap's plugins.
Ug nahuman ka! 🎉 Uban sa tinubdan sa Bootstrap nga Sass ug JS nga bug-os nga na-load, ang imong lokal nga development server kinahanglan nga ingon niini karon.

Karon mahimo ka magsugod sa pagdugang bisan unsang mga sangkap sa Bootstrap nga gusto nimo gamiton. Siguruha nga susihon ang kompleto nga proyekto nga pananglitan sa Parcel kung giunsa paglakip ang dugang nga kostumbre nga Sass ug pag-optimize sa imong pagtukod pinaagi sa pag-import lamang sa mga bahin sa CSS ug JS sa Bootstrap nga imong kinahanglan.

Nakita ba nimo ang usa ka butang nga sayup o wala sa panahon dinhi? Palihug ablihi ang usa ka isyu sa GitHub . Nagkinahanglan ug tabang sa pag-troubleshoot? Pangitaa o pagsugod og diskusyon sa GitHub.