Sehemu
Jifunze jinsi ya kujumuisha Bootstrap katika mradi wako kwa kutumia Parcel.
Weka Kifurushi
Sakinisha Parcel Bundler .
Sakinisha Bootstrap
Sakinisha bootstrap kama moduli ya Node.js kwa kutumia npm.
Bootstrap inategemea Popper , ambayo imeainishwa kwenye peerDependencies
mali. Hii inamaanisha kuwa itabidi uhakikishe kuwa umeziongeza zote mbili kwenye package.json
matumizi 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.scss
ili kuleta faili za Sass za Bootstrap na kisha ubatilishe vigeuzo maalum vilivyojumuishwa .
Tengeneza programu
Jumuisha kabla ya lebo src/index.js
ya 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>
Hariripackage.json
Ongeza dev
na build
maandishi kwenye package.json
faili 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