Fakiti

Koyi yadda ake haɗa Bootstrap a cikin aikin ku ta amfani da Parcel.

A wannan shafi

Sanya Parcel

Shigar Bootstrap

Sanya bootstrap azaman ƙirar Node.js ta amfani da npm.

Bootstrap ya dogara da Popper , wanda aka ƙayyade a cikin peerDependenciesdukiya. Wannan yana nufin cewa dole ne ku tabbatar kun ƙara su biyu zuwa ga package.jsonamfani 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.scssdon shigo da fayilolin Sass na Bootstrap sannan ka soke ginanniyar masu canji na al'ada .

Gina app

Haɗa src/index.jskafin 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>

Gyara`package.json`

Ƙara devda buildrubutun a cikin package.jsonfayil ɗ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