Pakki

Lærðu hvernig á að hafa Bootstrap með í verkefninu þínu með því að nota Parcel.

Á þessari síðu

Settu upp pakka

Settu upp Bootstrap

Settu upp bootstrap sem Node.js mát með því að nota npm.

Bootstrap fer eftir Popper , sem er tilgreint í peerDependencieseigninni. Þetta þýðir að þú verður að ganga úr skugga um að bæta þeim báðum við package.jsonnotkun þína npm install @popperjs/core.

Þegar öllu er lokið verður verkefnið þitt byggt upp svona:

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

Flytur inn JavaScript

Flyttu inn JavaScript Bootstrap í inngangsstað forritsins þíns (venjulega src/index.js). Þú getur flutt inn öll viðbætur okkar í einni skrá eða sérstaklega ef þú þarft aðeins undirmengi þeirra.

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

Flytur inn CSS

Til að nýta alla möguleika Bootstrap og sérsníða það að þínum þörfum, notaðu frumskrárnar sem hluta af búntferli verkefnisins.

Búðu til þína eigin scss/custom.scsstil að flytja inn Sass skrár frá Bootstrap og hnekkja síðan innbyggðu sérsniðnu breytunum .

Byggja app

Látið src/index.jsfylgja á undan lokamerkinu </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>

Breyta`package.json`

Bættu við devog buildforskriftum í package.jsonskrána þína.

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

Keyra dev script

Appið þitt verður aðgengilegt á http://127.0.0.1:1234.

npm run dev

Búðu til forritaskrár

Innbyggðar skrár eru í build/möppunni.

npm run build