Pakaĵo

Lernu kiel inkluzivi Bootstrap en via projekto uzante Parcel.

Sur ĉi tiu paĝo

Instalu Parcel

Instalu Bootstrap

Instalu bootstrap kiel modulo Node.js uzante npm.

Bootstrap dependas de Popper , kiu estas specifita en la peerDependenciesposedaĵo. Ĉi tio signifas, ke vi devos certigi aldoni ambaŭ al via package.jsonuzado 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.scsspor importi la Sass-dosierojn de Bootstrap kaj poste anstataŭi la enkonstruitajn kutimajn variablojn .

Konstruu apon

Inkluzivi src/index.jsantaŭ 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>

Redakti`package.json`

Aldonu devkaj buildskriptojn en via package.jsondosiero.

"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