Phasele
Dyondza ndlela yo katsa Bootstrap eka phurojeke ya wena hi ku tirhisa Parcel.
Nghenisa Phasela
Nghenisa Xihlanganisi xa Tiphasela .
Nghenisa Bootstrap
Nghenisa bootstrap tanihi modula ya Node.js hi ku tirhisa npm.
Bootstrap yi titshege hi Popper , leyi boxiweke eka peerDependencies
nhundzu. Leswi swi vula leswaku u ta boheka ku tiyiseka leswaku u swi engetela havumbirhi bya swona eka ku package.json
tirhisa 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.scss
ku 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.js
yo 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>
Hlelapackage.json
Engetelani dev
na build
switshuriwa eka package.json
fayili 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