Pacchettu
Amparate cumu include Bootstrap in u vostru prughjettu cù Parcel.
Installa Parcel
Installa Parcel Bundler .
Installa Bootstrap
Installa bootstrap cum'è un modulu Node.js cù npm.
Bootstrap dipende da Popper , chì hè specificatu in a peerDependencies
pruprietà. Questu significa chì avete da esse sicuru d'aghjunghje i dui à u vostru package.json
usu npm install @popperjs/core
.
Quandu tuttu serà finitu, u vostru prughjettu serà strutturatu cusì:
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
Importazione di JavaScript
Importa u JavaScript di Bootstrap in u puntu di entrata di a vostra app (di solitu src/index.js
). Pudete impurtà tutti i nostri plugins in un schedariu o separatamente se avete bisognu di solu un subset di elli.
// 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';
Importazione di CSS
Per utilizà tuttu u potenziale di Bootstrap è persunalizà à i vostri bisogni, utilizate i fugliali fonte cum'è una parte di u prucessu di bundling di u vostru prughjettu.
Crea u vostru propiu scss/custom.scss
per impurtà i fugliali Sass di Bootstrap è dopu annullà e variabili persunalizate integrate .
Custruisce l'app
Includite src/index.js
prima di l'etichetta di chjude </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>
Editpackage.json
Aghjunghjite dev
è build
script in u vostru package.json
schedariu.
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
Eseguite u script dev
A vostra app serà accessibile in http://127.0.0.1:1234
.
npm run dev
Custruisce i schedarii di l'app
I schedari custruiti sò in u build/
cartulare.
npm run build