Pakket

Learje hoe't jo Bootstrap opnimme yn jo projekt mei help fan Parcel.

Op dizze side

Pakket ynstallearje

Ynstallearje Bootstrap

Ynstallearje bootstrap as in Node.js-module mei npm.

Bootstrap is ôfhinklik fan Popper , dat wurdt oantsjutte yn it peerDependenciespân. Dit betsjut dat jo derfoar moatte soargje dat jo beide tafoegje oan jo package.jsongebrûk npm install @popperjs/core.

As alles foltôge is, sil jo projekt sa strukturearre wurde:

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

It ymportearjen fan JavaScript

Ymportearje Bootstrap's JavaScript yn it yngongspunt fan jo app (meastentiids src/index.js). Jo kinne al ús plugins ymportearje yn ien bestân of apart as jo mar in subset fan har nedich binne.

// 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 ymportearje

Om it folsleine potensjeel fan Bootstrap te brûken en it oan te passen oan jo behoeften, brûk de boarnebestannen as in diel fan it bondelproses fan jo projekt.

Meitsje jo eigen om Bootstrap's Sass-bestannen scss/custom.scsste ymportearjen en dan de ynboude oanpaste fariabelen te oerskriuwen .

Bou app

Opnimme src/index.jsfoar de slutende </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>

Bewurkje`package.json`

Foegje deven buildskripts ta yn jo package.jsonbestân.

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

Run dev skript

Jo app sil tagonklik wêze op http://127.0.0.1:1234.

npm run dev

Bou app-bestannen

Boude bestannen binne yn 'e build/map.

npm run build