Pakaĵo
Lernu kiel inkluzivi Bootstrap en via projekto uzante Parcel.
Instalu Parcel
Instalu Parcel Bundler .
Instalu Bootstrap
Instalu bootstrap kiel modulo Node.js uzante npm.
Bootstrap dependas de Popper , kiu estas specifita en la peerDependencies
posedaĵo. Ĉi tio signifas, ke vi devos certigi aldoni ambaŭ al via package.json
uzado npm install @popperjs/core
.
Kiam ĉio estos kompletigita, via projekto estos strukturita tiel:
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
Importado de JavaScript
Importu la JavaScript de Bootstrap en la enirpunkto de via programo (kutime src/index.js
). Vi povas importi ĉiujn niajn kromaĵojn en unu dosiero aŭ aparte se vi bezonas nur subaron de ili.
// 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';
Importado de CSS
Por utiligi la plenan potencialon de Bootstrap kaj personecigi ĝin laŭ viaj bezonoj, uzu la fontdosierojn kiel parton de la kunigprocezo de via projekto.
Kreu vian propran scss/custom.scss
por importi la Sass-dosierojn de Bootstrap kaj poste anstataŭi la enkonstruitajn kutimajn variablojn .
Konstruu apon
Inkluzivi src/index.js
antaŭ la ferma </body>
etikedo.
<!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>
Redaktipackage.json
Aldonu dev
kaj build
skriptojn en via package.json
dosiero.
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
Ruli dev-skripton
Via aplikaĵo estos alirebla ĉe http://127.0.0.1:1234
.
npm run dev
Konstruu aplikajn dosierojn
Konstruitaj dosieroj estas en la build/
dosierujo.
npm run build