Parcel

Lær, hvordan du inkluderer Bootstrap i dit projekt ved hjælp af Parcel.

På denne side

Installer Pakke

Installer Bootstrap

Installer bootstrap som et Node.js-modul ved hjælp af npm.

Bootstrap afhænger af Popper , som er specificeret i peerDependenciesegenskaben. Det betyder, at du skal sørge for at tilføje dem begge til din package.jsonbrug npm install @popperjs/core.

Når alt er afsluttet, vil dit projekt være struktureret således:

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

Importerer JavaScript

Importer Bootstraps JavaScript i din apps indgangspunkt (normalt src/index.js). Du kan importere alle vores plugins i én fil eller separat, hvis du kun har brug for et undersæt af dem.

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

Importerer CSS

For at udnytte det fulde potentiale af Bootstrap og tilpasse det til dine behov, skal du bruge kildefilerne som en del af dit projekts bundlingproces.

Opret din egen scss/custom.scssfor at importere Bootstraps Sass-filer og tilsidesæt derefter de indbyggede tilpassede variabler .

Byg app

Medtag src/index.jsfør det afsluttende </body>tag.

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

Redigere`package.json`

Tilføj devog buildscripts i din package.jsonfil.

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

Kør dev script

Din app vil være tilgængelig på http://127.0.0.1:1234.

npm run dev

Byg app-filer

Indbyggede filer er i build/mappen.

npm run build