Phasele

Dyondza ndlela yo katsa Bootstrap eka phurojeke ya wena hi ku tirhisa Parcel.

Eka tluka leri

Nghenisa Phasela

Nghenisa Bootstrap

Nghenisa bootstrap tanihi modula ya Node.js hi ku tirhisa npm.

Bootstrap yi titshege hi Popper , leyi boxiweke eka peerDependenciesnhundzu. Leswi swi vula leswaku u ta boheka ku tiyiseka leswaku u swi engetela havumbirhi bya swona eka ku package.jsontirhisa ka wena npm install @popperjs/core.

Loko hinkwaswo swi ta hetiwa, phurojeke ya wena yi ta hleriwa hi ndlela leyi:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

Ku nghenisa JavaScript

Nghenisa JavaScript ya Bootstrap eka ndhawu yo nghena ya app ya wena (hi ntolovelo src/index.js). U nga nghenisa ti-plugin ta hina hinkwato eka fayili yin’we kumbe hi ku hambana loko u lava ntsena ntlawa lowutsongo wa tona.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

Ku nghenisa CSS

Ku tirhisa vuswikoti hinkwabyo bya Bootstrap na ku byi lulamisa ku ya hi swilaveko swa wena, tirhisa tifayela ta xihlovo tanihi xiphemu xa endlelo ra ku hlanganisa ra phurojeke ya wena.

Endla ya wena scss/custom.scssku nghenisa tifayela ta Sass ta Bootstrap ivi u tlula swilo leswi cinca-cincaka swa ntolovelo leswi akiweke endzeni .

Aka app

Katsa emahlweni ka thegi src/index.jsyo pfala .</body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

Hlela`package.json`

Engetelani devna buildswitshuriwa eka package.jsonfayili ya wena.

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

Tirhisa dev script

App ya wena yi ta kumeka eka http://127.0.0.1:1234.

npm run dev

Aka tifayela ta app

Tifayili leti akiweke ti le ka build/folda.

npm run build