Parcela

Mësoni se si të përfshini Bootstrap në projektin tuaj duke përdorur Parcel.

Në këtë faqe

Instaloni parcelën

Instaloni Bootstrap

Instaloni bootstrap si një modul Node.js duke përdorur npm.

Bootstrap varet nga Popper , i cili është specifikuar në peerDependenciespronë. Kjo do të thotë që do të duhet të siguroheni që t'i shtoni të dyja në package.jsonpërdorimin tuaj npm install @popperjs/core.

Kur gjithçka të përfundojë, projekti juaj do të strukturohet si kjo:

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

Importimi i JavaScript

Importoni JavaScript-in e Bootstrap në pikën hyrëse të aplikacionit tuaj (zakonisht src/index.js). Ju mund t'i importoni të gjitha shtojcat tona në një skedar ose veçmas nëse ju nevojitet vetëm një nëngrup prej tyre.

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

Importimi i CSS

Për të shfrytëzuar potencialin e plotë të Bootstrap dhe për ta përshtatur atë sipas nevojave tuaja, përdorni skedarët burimor si pjesë të procesit të paketimit të projektit tuaj.

Krijoni tuajin scss/custom.scsspër të importuar skedarët Sass të Bootstrap dhe më pas anuloni variablat e personalizuara të integruara .

Ndërtoni aplikacionin

Përfshini src/index.jspërpara etiketës mbyllëse </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>

Redakto`package.json`

Shtoni devdhe buildskriptet në package.jsonskedarin tuaj.

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

Ekzekutoni skriptin e dev

Aplikacioni juaj do të jetë i aksesueshëm në http://127.0.0.1:1234.

npm run dev

Ndërtoni skedarë aplikacionesh

Skedarët e ndërtuar janë në build/dosje.

npm run build