Fakiti
Koyi yadda ake haɗa Bootstrap a cikin aikin ku ta amfani da Parcel.
Sanya Parcel
Sanya Parcel Bundler .
Shigar Bootstrap
Sanya bootstrap azaman ƙirar Node.js ta amfani da npm.
Bootstrap ya dogara da Popper , wanda aka ƙayyade a cikin peerDependencies
dukiya. Wannan yana nufin cewa dole ne ku tabbatar kun ƙara su biyu zuwa ga package.json
amfani da ku npm install @popperjs/core
.
Lokacin da aka gama komai, za a tsara aikin ku kamar haka:
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
Ana shigo da JavaScript
Shigo da Bootstrap's JavaScript a wurin shigarwar ka (yawanci src/index.js
). Kuna iya shigo da duk plugins ɗin mu a cikin fayil ɗaya ko daban idan kuna buƙatar juzu'in su kawai.
// 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';
Ana shigo da CSS
Don amfani da cikakken damar Bootstrap da keɓance shi ga buƙatunku, yi amfani da fayilolin tushen azaman wani ɓangare na tsarin haɗa aikin ku.
Ƙirƙiri naka scss/custom.scss
don shigo da fayilolin Sass na Bootstrap sannan ka soke ginanniyar masu canji na al'ada .
Gina app
Haɗa src/index.js
kafin alamar rufewa </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>
Gyarapackage.json
Ƙara dev
da build
rubutun a cikin package.json
fayil ɗin ku.
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
Guda rubutun dev
Za a sami damar aikace-aikacen ku a http://127.0.0.1:1234
.
npm run dev
Gina fayilolin app
Fayilolin da aka gina suna cikin build/
babban fayil.
npm run build