Waraqaan kan marame

Akkaataa Bootstrap pirojektii kee keessatti Parcel fayyadamuun hammachuu dandeessu baradhu.

Fuula kana irratti

Parsela dhaabuu

Bootstrap jedhamu fe'adhu

Bootstrap akka moojuulii Node.js npm fayyadamuun fe'i.

Bootstrap Popper irratti hundaa'a , kunis peerDependenciesqabeentaa keessatti ifteessame . package.jsonKana jechuun lamaan isaanii fayyadama kee irratti dabaluu kee mirkaneeffachuu qabda jechuudha npm install @popperjs/core.

Yeroo hunduu xumuramu pirojektiin kee akkasitti caaseffama:

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

JaavaScript galchuu

JaavaScript Bootstrap bakka seensaa appii keetii keessa galchi (yeroo baay'ee ) src/index.js. Ijaarsa keenya hunda faayilii tokko keessatti ykn addaan galchuu dandeessa yoo tuuta xiqqaa qofa barbaadde.

// 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';

CSS galchuu

Dandeettii guutuu Bootstrap fayyadamuu fi akka fedhii keetti dhuunfachuuf, faayiloota madda akka qaama adeemsa walitti qabamuu pirojektii keetii fayyadami.

Faayilota Sass Bootstrap galchuufscss/custom.scss kan kee uumi fi sana booda jijjiiramoota amala ijaaraman irra darbi .

App ijaaruu

Taagiin src/index.jscufiinsaa dura dabali .</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>

Gulaaluu`package.json`

Dabaluu devfi buildiskiriiptii package.jsonfaayilii kee keessa jiru.

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

Iskiriiptii dev hojjedhu

Appiin keessan bakka http://127.0.0.1:1234.

npm run dev

Faayilota appii ijaaruu

Faayiloonni ijaaraman build/galmee keessa jiru.

npm run build