Sehemu

Jifunze jinsi ya kujumuisha Bootstrap katika mradi wako kwa kutumia Parcel.

Katika ukurasa huu

Weka Kifurushi

Sakinisha Bootstrap

Sakinisha bootstrap kama moduli ya Node.js kwa kutumia npm.

Bootstrap inategemea Popper , ambayo imeainishwa kwenye peerDependenciesmali. Hii inamaanisha kuwa itabidi uhakikishe kuwa umeziongeza zote mbili kwenye package.jsonmatumizi yako npm install @popperjs/core.

Wakati yote yatakamilika, mradi wako utaundwa kama hii:

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

Inaleta JavaScript

Ingiza JavaScript ya Bootstrap kwenye sehemu ya kuingilia ya programu yako (kawaida src/index.js). Unaweza kuleta programu-jalizi zetu zote katika faili moja au kando ikiwa unahitaji kikundi kidogo kati yao.

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

Inaleta CSS

Ili kutumia uwezo kamili wa Bootstrap na kuibinafsisha kulingana na mahitaji yako, tumia faili chanzo kama sehemu ya mchakato wa kuunganisha mradi wako.

Unda yako mwenyewe scss/custom.scssili kuleta faili za Sass za Bootstrap na kisha ubatilishe vigeuzo maalum vilivyojumuishwa .

Tengeneza programu

Jumuisha kabla ya lebo src/index.jsya kufunga .</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>

Hariri`package.json`

Ongeza devna buildmaandishi kwenye package.jsonfaili yako.

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

Endesha hati ya dev

Programu yako itafikiwa katika http://127.0.0.1:1234.

npm run dev

Unda faili za programu

Faili zilizojengwa ziko kwenye build/folda.

npm run build