Boa

Sua sɛnea wode Bootstrap bɛka wo project no ho denam Parcel so.

Wɔ kratafa yi so

Fa Parcel no hyɛ mu

Fa Bootstrap no hyɛ wo kɔmputa so

Install bootstrap sɛ Node.js module a wode npm di dwuma.

Bootstrap gyina Popper , a wɔakyerɛ wɔ peerDependenciesagyapade no mu. Eyi kyerɛ sɛ ɛsɛ sɛ wohwɛ hu sɛ wode abien no nyinaa bɛka nea wode package.jsonbedi dwuma npm install @popperjs/coreno ho .

Sɛ ne nyinaa wie a, wɔbɛhyehyɛ wo dwumadie no sɛdeɛ ɛteɛ yi:

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

JavaScript a wɔde reba

Fa Bootstrap JavaScript no hyɛ wo app no mu (mpɛn pii no src/index.js). Wubetumi de yɛn plugins no nyinaa aba fael biako mu anaasɛ ɛsono emu biara sɛ wopɛ sɛ wunya emu fã ketewaa bi pɛ a.

// 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 a wɔde reba

Sɛ wopɛ sɛ wode Bootstrap tumi nyinaa bedi dwuma na woayɛ no sɛnea w’ahiade te a, fa source fael ahorow no di dwuma sɛ wo project no bundling nhyehyɛe no fã.

Yɛ w’ankasa scss/custom.scssde de Bootstrap no Sass fael ahorow no ba na afei bu ahyɛnsode nsakrae ahorow a wɔasisi no so .

Yɛ app no

Fa ka ho src/index.jsansa na wode ahyɛnsode a wɔde bɛto mu no </body>ahyɛ mu.

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

Sa mu`package.json`

Fa devne buildscripts ka ho wɔ wo package.jsonfael no mu.

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

Fa dev script no tu mmirika

Wo app no bɛyɛ nea wobetumi anya wɔ http://127.0.0.1:1234.

npm run dev

Yɛ app fael ahorow

Fael ahorow a wɔasisi no wɔ build/folda no mu.

npm run build

Boa