Parcel

Learn how to include Bootstrap in your project using Parcel.

On this page

Install Parcel

Install Bootstrap

Install bootstrap as a Node.js module using npm.

Bootstrap depends on Popper, which is specified in the peerDependencies property. This means that you will have to make sure to add both of them to your package.json using npm install @popperjs/core.

Sɛ ne nyinaa wie a, wɔbɛhyehyɛ wo dwumadie no sɛdeɛ ɛteɛ yi:

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

JavaScript a wɔde reba

Fa Bootstrap JavaScript no hyɛ wo app no mu (mpɛn pii no src/index.js). Wubetumi de yɛn plugins no nyinaa aba fael biako mu anaasɛ ɛsono emu biara sɛ wopɛ sɛ wunya emu fã ketewaa bi pɛ a.

// 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 a wɔde reba

Sɛ wopɛ sɛ wode Bootstrap tumi nyinaa bedi dwuma na woayɛ no sɛnea w’ahiade te a, fa source fael ahorow no di dwuma sɛ wo project no bundling nhyehyɛe no fã.

Yɛ w’ankasa scss/custom.scssde de Bootstrap no Sass fael ahorow no ba na afei bu ahyɛnsode nsakrae ahorow a wɔasisi no so .

Yɛ app no

Fa ka ho src/index.jsansa na wode ahyɛnsode a wɔde bɛto mu no </body>ahyɛ mu.

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

Sa mu`package.json`

Fa devne buildscripts ka ho wɔ wo package.jsonfael no mu.

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

Fa dev script no tu mmirika

Wo app no bɛyɛ nea wobetumi anya wɔ http://127.0.0.1:1234.

npm run dev

Yɛ app fael ahorow

Fael ahorow a wɔasisi no wɔ build/folda no mu.

npm run build