Ile

Kọ ẹkọ bii o ṣe le ṣafikun Bootstrap sinu iṣẹ akanṣe rẹ nipa lilo Parcel.

Lori iwe yi

Fi sori ẹrọ Parcel

Fi Bootstrap sori ẹrọ

Fi sori ẹrọ bootstrap bi Node.js module nipa lilo npm.

Bootstrap da lori Popper , eyiti o jẹ pato ninu ohun- peerDependenciesini naa. Eyi tumọ si pe iwọ yoo ni lati rii daju pe o fi awọn mejeeji kun si package.jsonlilo rẹ npm install @popperjs/core.

Nigbati gbogbo rẹ yoo pari, iṣẹ akanṣe rẹ yoo jẹ ti eleto bii eyi:

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

Gbigbe JavaScript wọle

Ṣe agbewọle Bootstrap JavaScript ni aaye titẹsi app rẹ (nigbagbogbo src/index.js). O le gbe gbogbo awọn afikun wa sinu faili kan tabi lọtọ ti o ba nilo ipin kan ninu wọn.

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

Gbigbawọle CSS

Lati lo agbara kikun ti Bootstrap ati ṣe akanṣe rẹ si awọn iwulo rẹ, lo awọn faili orisun gẹgẹbi apakan ti ilana iṣakojọpọ iṣẹ akanṣe rẹ.

Ṣẹda tirẹ scss/custom.scsslati gbe awọn faili Bootstrap's Sass wọle ati lẹhinna bori awọn oniyipada aṣa ti a ṣe sinu .

Kọ app

Fi sii ṣaaju tag src/index.jspipade .</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>

Ṣatunkọ`package.json`

Ṣafikun devati buildawọn iwe afọwọkọ ninu package.jsonfaili rẹ.

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

Ṣiṣe dev akosile

Ohun elo rẹ yoo wa ni iwọle ni http://127.0.0.1:1234.

npm run dev

Kọ app awọn faili

Awọn faili ti a kọ ni o wa ninu build/folda naa.

npm run build

Ile