Pakkie

Leer hoe om Bootstrap by jou projek in te sluit deur Parcel te gebruik.

Op hierdie bladsy

Installeer Pakkie

Installeer Bootstrap

Installeer bootstrap as 'n Node.js-module deur npm te gebruik.

Bootstrap hang af van Popper , wat in die peerDependencieseiendom gespesifiseer word. Dit beteken dat jy seker moet maak dat jy albei by jou package.jsongebruik voeg npm install @popperjs/core.

Wanneer alles voltooi sal wees, sal jou projek soos volg gestruktureer wees:

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

Invoer van JavaScript

Voer Bootstrap se JavaScript in jou program se toegangspunt in (gewoonlik src/index.js). U kan al ons inproppe in een lêer of afsonderlik invoer as u slegs 'n subset daarvan benodig.

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

Die invoer van CSS

Om die volle potensiaal van Bootstrap te benut en dit aan te pas by jou behoeftes, gebruik die bronlêers as deel van jou projek se bundelingsproses.

Skep jou eie scss/custom.scssom Bootstrap se Sass-lêers in te voer en ignoreer dan die ingeboude pasgemaakte veranderlikes .

Bou app

Sluit src/index.jsvoor die sluitingsmerker </body>in.

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

Wysig`package.json`

Voeg by deven buildskrifte in jou package.jsonlêer.

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

Begin dev script

Jou toepassing sal toeganklik wees by http://127.0.0.1:1234.

npm run dev

Bou programlêers

Geboude lêers is in die build/gids.

npm run build