Bootstrap leh Parcel te a awm bawk

Parcel hmanga i project-a Bootstrap-a CSS leh JavaScript dah leh bundle dan tur official guide.

He page ah hian

A tawp thlenga skip duh em? He guide atana source code leh working demo hi twbs/examples repository atang hian download rawh . StackBlitz ah pawh entirnan i hawng thei a , mahse Parcel hi tunah hian chutah chuan support a nih loh avangin run loh tur a ni.

Rem khawm

Bootstrap hmangin Parcel project kan siam mek a, chuvangin kan tan tak tak hmain prerequisites leh up front step thenkhat a awm a ni. He guide hian Node.js install a ngai a, terminal hriat chian deuh a ngai bawk.

Project folder siam la, npm setup rawh. Folder kan siam ang a, my-projectnpm chu -yargument hmangin kan initialize ang a, chu chuan interactive question zawng zawng min zawh loh nan.
```
mkdir my-project && cd my-project
npm init -y
```
Parcel dah tur a ni. Kan Webpack guide ang lo takin hetah hian build tool dependency pakhat chauh a awm. Parcel hian language transformer (Sass ang chi) a hriat chuan a install nghal vek ang. --save-devHe innghahna hi hmasawnna hmanna atan chauh a ni a, thil siamchhuahna atan a ni lo tih signal atan kan hmang thin .
```
npm i --save-dev parcel
```
Bootstrap chu install rawh. Tunah chuan Bootstrap kan install thei tawh ang. Kan dropdowns, popovers, leh tooltips te hi an positioning atan a innghat a nih avangin Popper pawh kan install dawn a ni. Chutiang components te hman i tum loh chuan hetah hian Popper hi i paih thei ang.
```
npm i --save bootstrap @popperjs/core
```

Tunah chuan dependency mamawh zawng zawng kan install tawh avangin project file siam leh Bootstrap import hna kan thawk thei tawh ang.

Project kalpui dan tur

Folder kan siam tawh a, my-projectnpm kan initialize tawh bawk. srcTunah chuan project structure round out turin kan folder, stylesheet, leh JavaScript file te pawh kan siam dawn a ni. A hnuaia mi hi run la my-project, a nih loh leh a hnuaia folder leh file structure tarlan ang hian manual in siam rawh.

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

I tih zawh chuan i project kimchang chu hetiang hian a awm tur a ni:

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

Hetih lai hian engkim a hmun dik takah a awm tawh a, mahse Parcel hian kan server start nan HTML page leh npm script a mamawh a ni.

Parcel chu configure rawh

Depencies install tawh leh kan project folder kan coding tan theih nan kan inpeih tawh avangin Parcel chu kan configure thei tawh ang a, kan project chu local takin kan run thei tawh ang. Parcel ngei pawh hian design atanga configuration file a mamawh lo a, mahse kan server start nan npm script leh HTML file kan mamawh a ni.

src/index.htmlFile chu fill up rawh . Parcel hian render tur chuan page a mamawh a, chuvangin kan index.htmlpage hmangin HTML bulpui thenkhat kan set up a, chutah chuan kan CSS leh JavaScript file te pawh a tel.

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

Hetah hian Bootstrap styling tlem kan dah tel a div class="container", <button>chutiang chuan Bootstrap-a CSS Webpack-in a load hun kan hmuh theih nan.

Parcel chuan Sass kan hmang tih a hre nghal ang a, a support turin Sass Parcel plugin chu a install ang. Mahse, i duh chuan manual-in i run thei bawk npm i --save-dev @parcel/transformer-sass.

Parcel npm scripts te chu add rawh. Open the package.jsonleh a hnuaia startscript hi scriptsobject ah hian add rawh. distHe script hmang hian kan Parcel development server kan start ang a, kan siam HTML file chu directory -ah kan compile hnuah kan render ang .
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Tin, a tawp berah chuan Parcel kan tan thei bawk. my-projectI terminal-a folder atang chuan chu npm script i dah thar chu run rawh:
```
npm start
```

He guide-a a hnuaia section leh a tawp berah hian Bootstrap-a CSS leh JavaScript zawng zawng kan import vek ang.

Bootstrap chu import rawh

Bootstrap chu Parcel-a import tur chuan import pahnih a ngai a, pakhat chu kan chhungah styles.scssleh pakhat chu kan main.js.

Bootstrap a CSS chu import rawh. src/scss/styles.scssBootstrap source Sass zawng zawng import turin a hnuaia mi hi add rawh .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Kan stylesheet te pawh i duh chuan a hranin i import thei bawk. A chipchiar zawka hriat duh chuan kan Sass import docs hi chhiar la .
Bootstrap a JS chu import rawh. src/js/main.jsBootstrap-a JS zawng zawng import turin a hnuaia mi hi add rawh . Popper hi Bootstrap hmangin automatic in a import dawn a ni.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Bundle size tihhniam theih nan JavaScript plugins te chu a tul angin pakhat zel i import thei bawk:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrap-a plugins hman dan tur hriat belh duh chuan kan JavaScript docs chhiar la .
Tin, i zo tawh bawk! 🎉 Bootstrap source Sass leh JS fully load tawh chuan tunah chuan i local development server chu hetiang hian a awm tur a ni.

Tunah chuan Bootstrap component i hman duh apiang i dah tan thei tawh ang. Bootstrap-a CSS leh JS-a i mamawh parts chauh import-a custom Sass dang dah belh dan tur leh i build optimize dan tur chu Parcel example project kimchang kha lo en ve ngei ang che.

Hetah hian thil dik lo emaw, hun kal tawh emaw i hmu em? GitHub ah hian issue pakhat hawng la . Harsatna chinfelna kawngah tanpuina i mamawh em? GitHub ah hian zawng la, sawihona tan rawh .